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" ...
随机推荐
- 51nod 1140 矩阵相乘结果的判断
给出三个N*N的矩阵A, B, C,问A * B是否等于C? Input 第1行,1个数N.(0 <= N <= 500) 第2 - N + 1行:每行N个数,对应矩阵A的元素.(0 ...
- 【费用流】【CODEVS】1227 方格取数2
[算法]最小费用最大流(费用流) [题解] 费用流:http://www.cnblogs.com/onioncyc/p/6496532.html 本题构图: 在有限的k次行走中尽可能多的拿到数字,明显 ...
- CodeForces - 999C
You are given a string ss consisting of nn lowercase Latin letters. Polycarp wants to remove exactly ...
- 蓝色的cms企业记账管理后台模板源码——后台
链接:http://pan.baidu.com/s/1bpxKGBP 密码:suda
- 63.UniquePaths II---dp
题目链接 题目大意:与62题类似,只是这个题中间有障碍. 法一:dfs,依旧超时.代码如下: public int uniquePathsWithObstacles(int[][] obstacleG ...
- spring web 生命周期理解
spring web /bean 生命周期 反射注解 aop代理类生成 init servlet 初始化 load spring-context.xml load XmlParser 类解析对象 ...
- SpringMVC_HelloWorld_03
通过注解的方式实现一个简单的HelloWorld. 源码 一.新建项目 同SpringMVC_HelloWorld_01 不同的是springmvc配置文件的命名和路径,此处为src/springmv ...
- 升级vs17中的cordova-simulate
visual studio 17自带的cordova-simulate有一个bug,动态添加的html代码里面如果带有header,会出现js异常导致后面js程序终止执行,这个问题已经给他们提了iss ...
- ansible command模块将返回值写入变量
ansible 中command模块支持 register参数将远程命令执行的输出结果存储在变量中,后续可以在when中对该变量进行检索确定下一步任务. --- - name: cat /etc/re ...
- golang基础之三-字符串,时间,流程控制,函数
strings和strconv的使用 strings strings.HasPrefix(s string,preffix string) bool:判断字符串s是否以prefix开头 stirngs ...