File Input多次添加文件，动态删除文件，用来实现上传等操作（踩坑补全）

1.需求图示

 

2.按图索骥

• 添加 实际上，添加附件就是<input type="file" id="myFile">的控件，var fileList = getElementById(myFile).files就可以得到选择的文件的FileList对象，这个对象是类数组的对象(含义有点像函数参数arguments)。记住这一点很重要。

• 显示 下面的显示文件名的面板根据上传的文件名name显示

3.刨根问底

• FileList类数组对象
  console.log(fileList)打印出来的结果显示：
  bash
FileList
0:File
lastModified:1446204650848
lastModifiedDate:Fri Oct 30 2015 19:30:50 GMT+0800 (中国标准时间)
name:"CCGIS.png"
size:809542
type:"image/png"
webkitRelativePath:""
__proto__:File
length:1
__proto__:FileList
  
  思考：我们只需要能动态修改fileList即可，第一想法是将它转化为数组进行操作。
  files = Array.prototype.slice.call(files);

4.付诸行动

动手编程吧：

html：

<div class="kb-btn-update-wrap">
      <input style="padding-left:0;" type="file" name="up_pci[]" id="ContractAttachm" multiple="multiple" placeholder="请上传.doc, .pdf 的文件" accept=".doc,.docx,.pdf">
      <span class="jrbtn up-btn">选择文件</span>
</div>
<div class="upfile-list-mes"> </div>

交互代码：

let fileLists = [];
$('#ContractAttachm').on('change', function(event) {
    fileLists = [];
    $('.upfile-list-mes').empty();
    let _files = this.files;
    _files = Array.from(_files); //将伪数组专为真数组修改
    fileLists = _files;
    //显示文件名面板
    if (_files.length !== 0) {
     let html = '';
        for (let i = 0; i < _files.length; i++) {
       html += "<p>" + _files[i].name + "&nbsp; &nbsp;   <span class='icon-remove'>X</span></p>";
    }
    $('.upfile-list-mes').append(html);
     }
})

 /*点击叉号可以删除要上传的文件*/
$(document).on('click', '.icon-remove', function(event) {
   let ind = $(this).parent().index();
   $(this).parent().remove();
   console.log(window.Vue.fileLists)
   fileLists.splice(ind, 1);//修改fileLists
});

提交代码：

let formData = $("form").serializeJson();
                    //文件上传补充
let form = new FormData()
form.append("参数",form.params);
form.append("_token",formData._token);
//追加更改的文件
if(this.fileLists && this.fileLists.length > 0){
    this.fileLists.forEach(function (item,index,arr) {
        form.append("up_pci["+index+"]",item);
    })
}
$.ajax({
    type:'POST',
    url: 'url',
    processData: false,
    contentType: false,
    data: form,
    dataType:'json',
    success:function(res){
        if(res.code == 1){
            layer.msg(res.msg, {icon:6},function () {
                parent.layer.closeAll();
            });
        }else{
            layer.msg(res.msg, {icon:5});
        }
    },
    error : function(e) {
    }
})