使用FormData实现文件多次添加累加上传和选择删除(只支持IE8以上)

本文介绍如何在不使用插件的情况下,利用FormData实现文件多次选择累加上传的功能,支持IE8以上浏览器。重点在于利用js数组管理文件,通过change事件动态更新,并使用FormData封装文件信息。同时讲解了在上传过程中遇到的问题,如需清除input file内容以避免重复选择同一文件不触发change事件,以及如何使用splice方法删除文件。
摘要由CSDN通过智能技术生成

先废话一波~~

原本的多文件上传功能在选择文件时,只能通过同一范围的鼠标框选或者ctrl/shift多选取选择文件,这样选择文件很不灵活,而且在确定之后如果漏选了文件,再次点击上传按钮时会清空表单里的文件信息,只能重复之前的操作去选文件再加上漏选的文件,十分不方便。

所以在大部分网站上选择图片上传都是可以累加的,就是在第一次选择完文件点击确定后,第二次再点击上传按钮选文件会自动跟第一次的接在一起,然后展示在界面上,方便用户单独进行删除。文章的主旨就是在不用插件的情况下实现这样的效果。

实现

思考过程基本是:最后要得到的是文件数组MultipartFile[] → 页面ajax传递参数要为数组 → 把文件放到能灵活操作的js数组里 → 通过change方法能在选择文件后放到js数组 → FormData能灵活地把js数组里的对象封装成表单信息(FormData兼容ie8以上)。

<form enctype="multipart/form-data">
    <input id="file" onchange="fileChange(this)" type="file" name="file" multiple>
</form>

记得要清空input file里面的信息,因为change是在input里的信息发生改变时才触发,如果没清空,在上传跟上一次操作一样的文件时,就不会触发方法。例如:选择了A文件,不小心点删除了,再次选择A文件就会失败。


                
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值