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" ...
随机推荐
- 【总结】对FFT的理解 / 【洛谷 P3803】 【模板】多项式乘法(FFT)
题目链接 \(\Huge\text{无图,慎入}\) \(FFT\)即快速傅里叶变换,用于加速多项式乘法. 如果暴力做卷积的话就是一个多项式的每个单项式去乘另一个多项式然后加起来,时间复杂度为\(O( ...
- 从docker到docker-compose部署一个nginx+flask+mysql+redis应用
目的是把一个flask项目的mysql数据库.redis数据库.flask应用.nginx服务分别装到四个容器中,然后用docker-compose命令同时启动与关闭 一.安装docker Docke ...
- Warning: Permanently added the RSA host key for IP address '192.30.253.113' to the list of known hosts. Permission denied (publickey). fatal: Could not read from remote repository. Please make sure y
这个应该是很多github新手经常出错的问题,这个就是没有在你github上添加一个公钥. 下面就直接说步骤: 1 可以用 ssh -T git@github.com去测试一下 图上可以明显看出缺少了 ...
- python开发规范(转载)
转载自http://www.cnblogs.com/wangcp-2014/p/4838952.html 目录 代码布局 1.1 缩进 1.2 表达式和语句中的空格 1.3 行的最大长度 1.4 空行 ...
- python基础===数据伪造模块faker
介绍文档: https://pypi.org/project/Faker/ https://faker.readthedocs.io/en/latest/ https://faker.readthed ...
- Python学习笔记——迭代器和生成器
1.手动遍历迭代器 使用next函数,并捕获StopIteration异常. def manual_iter(): with open('./test.py') as f: try: while Tr ...
- [ python ] 接口类和抽象类
接口类 继承有两种用途:1. 继承基类的方法,并且做出自己的改变或者扩展(代码重用)2. 申明某个子类兼容于某基类,定义一个接口类interface,接口类定义了一些接口名且未实现接口的功能,子类继承 ...
- SVM资料
解释SMO算法比较好的文档 http://wenku.baidu.com/view/aeba21be960590c69ec3769e.html 参考博客: http://myjuno.blogbus. ...
- POJ 3253 Fence Repair(哈夫曼编码)
题目链接:http://poj.org/problem?id=3253 题目大意: 有一个农夫要把一个木板钜成几块给定长度的小木板,每次锯都要收取一定费用,这个费用就是当前锯的这个木版的长度 给定各个 ...
- Quartz任务调度入门
Quartz任务调度入门 了解Quartz体系结构Quartz对任务调度的领域问题进行了高度的抽象,提出了调度器.任务和触发器这3个核心的概念,并在org.quartz通过接口和类对重要的这些核心概念 ...