multiple上传多文件，点击删除，提交表单被删除的文件却还存在（FileList对象无法更改）

本文链接：https://blog.csdn.net/weixin_43165220/article/details/107518669

之前做过一个多文件上传的功能，就是点击上传按钮，在弹出的选择文件框可以同时选中多个文件，我当时觉得很简单啊，直接在input上加个multiple属性不就可以了吗。
然后今天同事跟我说，那个上传多个文件的，上传后点击删除，保存再倒回去看删除的文件还在。
因为我们的删除按钮是分两种情况的，第一种是文件一上传，还没有保存到数据库，然后删除。第二种是已经保存到数据库的文件点击删除。
在这里插入图片描述
第二种就不说了，主要是第一种情况，我单文件上传，点击删除，保存，再倒回去看的时候，文件已经删除了，但是偏偏多文件就不行。

文件还没有保存过，删除的时候我只要把文件所在的div给移除就可以了。然后一开始我以为我删除的时候传的图片所在的div的id错了，可是并没有，之后我发现原来FileList对象是不可以更改的，当你上传多个文件的时候，即使你删除了某个文件，但是提交表单的时候，它保存的fileList还是是一开始的fileList，并不是你删除过文件后的fileList，所以这也是为什么保存过后再回去看，你明明删除的文件却还是存在。

这个时候，就需要定义一个变量，将fileList对象的内容给这个变量，然后删除的时候，也是删除这个变量里的文件，提交表单的时候，提交的也是这个变量里的文件内容，而不是fileList对象的内容。

//删除
<a href="javascript:void(0)" class="" onclick="fileDel($(this),fileId)">删除</a>

var count = 0;		//用于限制自增的文件上传元素id的唯一性
var curFiles = [];	//用于存放FileList对象的文件内容
//e就是上传控件
function showFile(e){
	Array.prototype.push.apply(curFiles, e.get(0).files);
	var f_Name = e.attr("name");	//获取上传控件name属性的值
	var fileId = e.attr("id");		//获取上传控件自身的id值
	var files = e.get(0).files;
	//创建一个上传文件插件input元素，用于多次点击上传时保存生成文件的信息
	e.next().prev().after('<input type="file" id="'+fileId+'" name="'+f_Name+'"  multiple="multiple"  style="display: none;" οnchange="showFile($(this))">');
	for (var i = 0; i < files.length; i++) {
		var file = files[i];	// 获取上传的文件信息
		//这个是上传控件的id，当存在多个上传控件时用于区分这个文件是哪个上传控件的，只有一个上传控件可以省略
		file["fieldName"] = f_Name;	
		fileId = fileId+count;
		...
		count++;
	}
}

//删除刚上传的文件，id上传文件后创建的用于存储这个文件信息的input的id，即上面的fileId
function fileDel(that,id) {
	confirmx("是否删除指定文件？",function(){
		//这里是获取要删除的文件的文件名
		var childrenName = that.prev().children(":first").children(":first").text();
		curFiles = curFiles.filter(function(file) {
	        return file.name !== childrenName;
	    });
	  	//将存储文件信息的input移除
		$("#"+id).remove();
		//将文件所在的div移除
		var div = that.parent();
		div.remove();
	},"")
}

//提交表单
function submitForm(){
	var form = new FormData($("#viewForm")[0]);
	//提交表单时，判断是否有上传文件
	if(curFiles.length>0){
		//遍历表单中的key和value
		for(var [a,b] of form.entries()){
			//如果value是file类型的
			if(b instanceof File){
				if(b.name != ""){
					//先将表单中原有的fileList对象中的文件删除
					form.delete(a);
					for (var i = 0; i < curFiles.length; i++) {
							//然后再将curFiles的文件追加到表单中
							if(a==curFiles[i].fieldName){
								form.append(a, curFiles[i]);
							}
						}
					//var f1 = new File([],"");
					//form.append(a,f1);
				}
			}
		}
	}
	...
}