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" ...
随机推荐
- 【BZOJ】1798: [Ahoi2009]Seq 维护序列seq 线段树多标记(区间加+区间乘)
[题意]给定序列,支持区间加和区间乘,查询区间和取模.n<=10^5. [算法]线段树 [题解]线段树多重标记要考虑标记与标记之间的相互影响. 对于sum*b+a,+c直接加上即可. *c后就是 ...
- python-num18 - django进阶一
一.深入django的路由系统 下面为django的请求生命周期 下面来看下整个生命周期中的路由系统: 在Django的urls中我们可以根据一个URL对应一个函数名来定义路由规则如下: " ...
- Ajax请求数据与删除数据后刷新页面
1.ajax异步请求数据后填入模态框 请求数据的按钮(HTML) <a class="queryA" href="javascript:void(0)" ...
- 利用gcc的__attribute__编译属性section子项构建初始化函数表【转】
转自:https://my.oschina.net/u/180497/blog/177206 gcc的__attribute__编译属性有很多子项,用于改变作用对象的特性.这里讨论section子项的 ...
- openjudge-NOI 2.6-1775 采药
题目链接:http://noi.openjudge.cn/ch0206/1775/ 题解: 很经典的01背包问题,设时间为t,价值为v 一维压缩,状态转移方程fj=max(fj,fj-ti+vi) # ...
- 在Ubuntu上安装搜狗输入法
1.进入搜狗输入法官网 2.下载Linux版本,选择64bit 下载 3.等待下载的同时,进行系统配置 进入系统设置->语言支持->进行更新(需要输入登录密码)->在键盘输入法系统选 ...
- 2.rabbitmq 工作队列
1. 生产者 #coding:utf8 import pika import json import sys message = ''.join(sys.argv[1:]) or "hell ...
- Codeforces 799B - T-shirt buying(STL)
题目链接:http://codeforces.com/problemset/problem/799/B 题目大意:有n件T恤,每件T体恤都分别有价格(每件衣服的价格不重复).前面的颜色.背部的颜色三种 ...
- scala学习5--函数二
to def test() : Unit = { // for(i <- 1.to(100)){ // println(i) // } for(i <- 1 to 100 ){ prin ...
- Oracle与MySQL连接配置
MySQL: Driver: com.mysql.jdbc.Driver url: jdbc:mysql://localhost:3306/GBDSPT(数据库名称) Oracle: Driver:o ...