var fileLists = [] $('#label').click(function(){ // var inputBefore = document.getElementById('inputBefore'); var $input = $("#myFile"); console.log(111) $input.on('change',function(){ var files =this.files; //filelist files = Array.prototype.slice.call(files); //全部转化为数组 fileLists = fileLists.concat(files); //显示文件名面板 console.log(11) if (files.length !== 0) { console.log(111) var html = ''; for (var i = 0; i < files.length; i++) { html += "<li><span>" + files[i].name + "</span>  <span>"+"删除</span></li>"; } $('.upload_ul').append(html); } }) $input.removeAttr("id"); // // // 我们做个标记,再class中再添加一个类名就叫uploadImg var newInput = '<input class="uploadImg" type="file" id="myFile">'; $(this).append($(newInput)); })
<div class="file_upload"> <label id="label"> <!-- 上传文件 --> <input type="file" multiple id="myFile"> </label> <span class="no_file">未选择文件</span> <ul class="upload_ul"> </ul> </div>
类似多张上传图片,可以添加重复文件