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控件 -->
input file实现多次上传文件(不会覆盖上次上传的文件)的更多相关文章
- VSCode打开文件总是会覆盖上次打开的标签
在使用VSCode的时候,打开一个文件之后,如果没有修改的话,那么再打开下一个文件的时候,他总会替换上次打开的标签,那么怎么样才能每次都在新的标签打开文件呢? 实际上,这种情况的出现是因为我们点击文件 ...
- Could not open input file: artisan 【Laravel初体验】
1,情景描述:在命令行窗口写入php artisan make:model Models\MenuModel用于创建模型时,出现此错误(Could not open input file: artis ...
- 动态input file多文件上传到后台没反应的解决方法!!!
其实我也不太清除具体是什么原因,但是后面就可以了!!! 我用的是springMVC 自带的文件上传 1.首先肯定是要有springMVC上传文件的相关配置! 2.前端 这是动态input file上传 ...
- h5 input file ajax实现文件上传
<input type="file" accept="image/*" height="0" class="file_inp ...
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
- 如何用一张图片代替 'input:file' 上传本地文件??
今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有转过弯来,回来之后一细想原来这么简单,哭笑不得,特此记录一下! 原题是这样的: 如何用一张图片代替 'input:file' 上传 ...
- input file实现多选和限制文件上传类型
<!-- input file accept 属性设置可上传文件的类型 multiple属性设置可多文件上传--> <!-- accept 并未真正的实现限制上传文件类型,只是在 ...
- 在HTML5的 input:file 上传文件类型控制 遇到的问题
1.input:file 属性的介绍 先瞅代码吧 <form> <input type="file" name="pic" accept=& ...
- input file 文件上传标签的样式美化
input file 文件上传标签的样式美化 将<input type="file">的透明度设置为0: <input type="file" ...
随机推荐
- 每个Web开发者都需要具备的9个软技能
对于一份工作,你可能专注于修炼自己的内功,会在不自觉中忽视软技能.硬技能决定你是否能得到工作,而软技能能够表明你是否适合这份工作和适应工作环境等.所有的公司都有属于自己的文化,并努力将这些文化传承下去 ...
- [php]禁用缓存
header("Expires: -1"); header("Cache-Control: no_cache"); header("pragma: n ...
- 【代码优化】调用optional delegates的最佳方法
[转载请注明出处]http://www.cnblogs.com/lexingyu/p/3932475.html 本文是以下两篇blog的综合脱水,感谢两位作者为解放码农生产力所做的深入思考=.= Sm ...
- ubuntu16.04中启动anaconda图形化界面
$ source ~/anaconda3/bin/activate root $ anaconda-navigator
- Fiddler 断点调试http请求
fiddler有两种断点,Before Requests(可以修改请求参数).After Responses(可以修改返回值) Before Requests 断点 1.设置Before Reques ...
- Java企业级电商项目架构演进之路 Tomcat集群与Redis分布式
史诗级Java/JavaWeb学习资源免费分享 欢迎关注我的微信公众号:"Java面试通关手册"(坚持原创,分享各种Java学习资源,面试题,优质文章,以及企业级Java实战项目回 ...
- 47、求1+2+3+...+n
一.题目 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 二.解法 public class Solut ...
- Linux运维常用的几个命令介绍【转】
Linux运维常用的几个命令介绍 1. 查看系统内核版本 [root@funsion geekxa]# cat /etc/issue CentOS release 6.5 (Final) Kerne ...
- 构建基于TCP的应用层通信模型
各层的关系如下图,表述的是两个应用或CS间通信的过程: 通常使用TCP构建应用时,需要考虑传输层的通信协议,以便应用层能够正确识别消息请求.比如,一个请求的内容很长(如传文件),那肯定要分多次发送 ...
- 配置Tomcat、maven远程部署调试总结。
注意:可以搞两个环境,一个本地tomcat 一个服务器上的tomcat ,然后都采用如下配置.这样就可以 在本地调试,调试好后,再发布到服务器端.非常方便. ==================== ...