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实现多次上传文件(不会覆盖上次上传的文件)的更多相关文章

  1. VSCode打开文件总是会覆盖上次打开的标签

    在使用VSCode的时候,打开一个文件之后,如果没有修改的话,那么再打开下一个文件的时候,他总会替换上次打开的标签,那么怎么样才能每次都在新的标签打开文件呢? 实际上,这种情况的出现是因为我们点击文件 ...

  2. Could not open input file: artisan 【Laravel初体验】

    1,情景描述:在命令行窗口写入php artisan make:model Models\MenuModel用于创建模型时,出现此错误(Could not open input file: artis ...

  3. 动态input file多文件上传到后台没反应的解决方法!!!

    其实我也不太清除具体是什么原因,但是后面就可以了!!! 我用的是springMVC 自带的文件上传 1.首先肯定是要有springMVC上传文件的相关配置! 2.前端 这是动态input file上传 ...

  4. h5 input file ajax实现文件上传

    <input type="file" accept="image/*" height="0" class="file_inp ...

  5. ajax+ashx 完美实现input file上传文件

    1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图:    Firefox效 ...

  6. 如何用一张图片代替 'input:file' 上传本地文件??

    今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有转过弯来,回来之后一细想原来这么简单,哭笑不得,特此记录一下! 原题是这样的:  如何用一张图片代替 'input:file' 上传 ...

  7. input file实现多选和限制文件上传类型

    <!-- input file  accept 属性设置可上传文件的类型  multiple属性设置可多文件上传--> <!-- accept 并未真正的实现限制上传文件类型,只是在 ...

  8. 在HTML5的 input:file 上传文件类型控制 遇到的问题

    1.input:file 属性的介绍  先瞅代码吧 <form> <input type="file" name="pic" accept=& ...

  9. input file 文件上传标签的样式美化

    input file 文件上传标签的样式美化 将<input type="file">的透明度设置为0: <input type="file" ...

随机推荐

  1. Intellij IDEA 快捷键整理(转)

    Ctrl+Shift + Enter,语句完成 “!”,否定完成,输入表达式时按 “!”键 Ctrl+E,最近的文件 Ctrl+Shift+E,最近更改的文件 Shift+Click,可以关闭文件 C ...

  2. 实用的 Node.js 教程,工具和资源

    这里分享一批实用的实用的 Node.js 教程,工具和资源. Node.js是一个建立在Chrome之上的JavaScript运行时平台,可方便地构建快速,可扩展的网络应用程序.Node.js使用事件 ...

  3. c++ poco 使用mysql中文乱码问题

    poco 是c++ 一个比较好的库,现在正在学习使用它,碰到一些问题记录在此. poco版本:poco-1.46-all ,带有数据库的支持模块 操作系统:ubuntu 1.使用poco的MySQL模 ...

  4. 【51nod】1238 最小公倍数之和 V3 杜教筛

    [题意]给定n,求Σi=1~nΣj=1~n lcm(i,j),n<=10^10. [算法]杜教筛 [题解]就因为写了这个非常规写法,我折腾了3天…… $$ans=\sum_{i=1}^{n}\s ...

  5. Ice Cream Tower Gym - 101194D (贪心 + 二分 )

    题目链接 : https://cn.vjudge.net/problem/Gym-101194D 题目大意 : 给你n个冰激凌球,让你用这些冰激凌球去垒冰激凌,要求是下面的这一个必须是他上面一个的两倍 ...

  6. linux设备驱动模型-浅析-转

    1.  typeof typeof并非ISO C的关键字,而是gcc对C的一个扩展.typeof是一个关键字(类似sizeof),用于获取一个表达式的类型. 举个简单的例子: char tt; typ ...

  7. nginx location 指令意义

    基本语法:location [=|~|~*|^~] /uri/ { … } = 严格匹配.如果这个查询匹配,那么将停止搜索并立即处理此请求.~ 为区分大小写匹配(可用正则表达式)!~为区分大小写不匹配 ...

  8. vsts 自动部署到Azure

    如果要部署到中国区的Azure ,请先阅读 http://www.cnblogs.com/cnryb/p/7867275.html 前置条件,我把代码托管在vsts(放在GitHub上也没问题,这里不 ...

  9. Linux删除除了今天以外的文件

    [背景] 开发到日志记录功能时,每天都会产生当天的一个日志,久而久之就会产生累积,想要查看的时候,tab键无法自动补全,还要自己额外输入. 比较麻烦. [命令] 经过查找和实验,找到了以下的方法: 1 ...

  10. Tutorial 5: Relationships & Hyperlinked APIs

    转载自:http://www.django-rest-framework.org/tutorial/5-relationships-and-hyperlinked-apis/ Tutorial 5: ...