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

之前做过一个多文件上传的功能,就是点击上传按钮,在弹出的选择文件框可以同时选中多个文件,我当时觉得很简单啊,直接在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);
				}
			}
		}
	}
	...
}

然后按照上面的改完之后,就没问题了,可以随便删除上传。
参考这篇文章:https://www.cnblogs.com/imwtr/p/5924042.html

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
你可以使用Ant Design Vue的Upload组件来实现图片上传表单。以下是一个示例代码: ```vue <template> <a-form @submit="handleSubmit" :form="form"> <a-form-item label="选择文件"> <a-upload :before-upload="beforeUpload" :default-file-list="fileList" multiple drag action="/upload" <!-- 上传文件的服务器地址 --> name="file" :show-upload-list="false" > <div> <p class="ant-upload-drag-icon"> <a-icon type="inbox"></a-icon> </p> <p class="ant-upload-text">点击或将文件拖到此区域上传</p> </div> </a-upload> </a-form-item> <a-form-item> <a-button type="primary" html-type="submit">提交</a-button> </a-form-item> </a-form> </template> <script> export default { data() { return { form: this.$form.createForm(this), fileList: [], // 用于存储选择的文件 }; }, methods: { beforeUpload(file) { this.fileList.push(file); // 将选择的文件添加到fileList数组中 return false; // 阻止自动上传 }, handleSubmit(e) { e.preventDefault(); this.form.validateFields((errors, values) => { if (!errors) { // 提交表单后的处理逻辑,例如将文件上传到服务器 // 可以使用axios或其他HTTP库发送POST请求将文件上传到服务器 // 使用this.fileList获取选择的文件列表 console.log('选择的文件:', this.fileList); } }); }, }, }; </script> ``` 在这个示例中,我们使用`a-upload`组件创建一个文件上传区域。在选择文件后,会调用`beforeUpload`方法将选择的文件添加到`fileList`数组中,并阻止自动上传。在提交表单时,通过`handleSubmit`方法获取选择的文件列表,并处理上传到服务器的逻辑。 你需要将`action`属性设置为你的服务器上传接口的地址。提交表单后,你可以使用axios或其他HTTP库将文件上传到服务器。 请注意,这只是一个示例代码,你需要根据你的实际需求进行适当的修改和调整。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

符华-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值