input file实现多次上传文件（不会覆盖上次上传的文件）

html原生的file多选控件：<input class="className" type="file" name="name" accept="image/*" multiple />

存在问题：第一次选择了n个文件，第二次选中m个文件，第二次选择结束之后，第一次选择的文件会被覆盖掉。导致上传的内容不包含最后一次之前选择的文件。

解决方案：

1.用一个div作为选择文件的触发节点：<div id="uploaderBox" class="weui-uploader__input"></div>

2.给uploaderBox绑定点击事件：点击div动态添加file控件（隐藏），给file控件绑定change事件（预览操作等），模拟file控件点击事件触发选择文件操作。代码如下：

$("#uploaderBox").on("click", function(e) {
       var newFileInput = "<input id='uploaderInput' type='file' name='name' accept='image/*' multiple />";
       $(this).parent().append($(newFileInput));
       $("#uploaderInput").bind("change", function(e){
             //onFileUploaded(e);预览等操作
             $(this).removeAttr("id");
       });
       $("#uploaderInput").click();
});

<div id="uploaderBox" class="weui-uploader__input"></div>
<-- <input type="file" name="name" accept="image/*" multiple=""> --> <-- 动态添加的file控件 -->

 

转载于:https://www.cnblogs.com/zhoujl-5071/p/7884866.html