input file实现多次上传文件(不会覆盖上次上传的文件)
2024-09-30 05:33:39
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控件 -->
最新文章
- MongoDB-集群搭建
- NYOJ题目1051simone牌文本编辑器
- Jquery学习笔记--性能优化建议
- 如何在UMG中上显示3D物体
- NGUI UIToggle
- Excel与SqlServer的导入导出问题总结
- 学习笔记_过滤器详细(过滤器JavaWeb三大组件之一)
- -_-#【Angular】定义服务
- java获取当前时间
- MySQL用户管理:添加用户、授权、删除用户
- 201521123067 《Java程序设计》第11周学习总结
- maridb\mysql 源码安装,以10.1.26版本为例
- 异步任务spring @Async注解源码解析
- 你不需要 jQuery,但你需要一个 DOM 库
- cetos6.8配置svn服务器
- Mark SDL2 Lazy Foo&#39;s Producations
- BZOJ-1- 4868: [Shoi2017]期末考试-三分
- .net Parallel并行使用注意事项
- thinkphp5 数据库和模型
- JAVA设计模式——第 2 章 代理模式【Proxy Pattern】(转)
热门文章
- 使用 WebSockets 技术的 9 个应用场景
- R0—New packages for reading data into R — fast
- LintCode 402: Continuous Subarray Sum
- 【CodeForces】901 C. Bipartite Segments
- TensorFlow下利用MNIST训练模型识别手写数字
- 【bzoj5050】【bzoj九月月赛H】建造摩天楼
- php cache类代码(php数据缓存类)
- Metro应用Json数据处理
- CentOS下NTP安装配置
- scrapy使用PhantomJS和selenium爬取数据