input file实现多次上传文件(不会覆盖上次上传的文件)
2018-01-11 20:33
597 查看
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控件点击事件触发选择文件操作。代码如下:
存在问题:第一次选择了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控件 -->
相关文章推荐
- 解决input file,实现点击文字上传文件
- bootstrap-fileinput实现serverlet文件上传功能
- 使用<input type="file">实现文件上传
- bootstrapfileinput实现文件自动上传
- SpringMVC实现多文件上传+bootstrap fileinput的使用
- js 实现 <input type="file" /> 文件上传
- asp.net/c# 用<input type="file" />实现文件上传,multipart/form-data
- BootStrap FileInput 插件实现多文件上传前端功能
- BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
- input file实现多选和限制文件上传类型
- inputfile(bootstrap)实现文件上传保存本地路径
- js 实现 input type="file" 文件上传示例代码
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
- ajax+ashx 完美实现input file上传文件
- 如何让file input能够实现置空和【异步】上传后相同文件的再次选择触发change
- Bootstrap的fileinput插件实现多文件上传的方法
- asp.net/c# 用<input type="file" />实现文件上传,multipart/form-data
- Bootstrap File Input MultipartFile 及base64方式实现文件上传
- 如何点击a标签实现弹出input file上传文件对话框
- input type=file 只读,并能实现文件上传