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. [数据库中间件]centos6.6下配置libzdb所产生的错误

    1.关于gmtime_r.timegm的隐藏声明错误,从系统的time.h中复制两个函数引用到libzdb自己定义的time.h,代码如下: extern struct tm *gmtime_r (c ...

  2. [HNOI2009]有趣的数列 题解(卡特兰数)

    [HNOI2009]有趣的数列 Description 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ai}: (2)所有的奇数项满 ...

  3. 飘雪效果的swf

    //第一帧动作 import flash.events.Event; ;k<;k++) { var xuehua:xue= new xue(); xuehua.alpha = Math.rand ...

  4. ueditor和thinkphp框架整合修改版

    基于tp官网上的一篇文章修改的  因为tp中所有目录其实都是性对于入口文件的 在原来的基础上略做修改后 已经做到 无论项目放在www下的任何位置 图片在编辑器中回填后都能正常显示! http://fi ...

  5. docker 加速

    Docker配置阿里云加速地址 打开阿里云网站https://cr.console.aliyun.com,登陆自己的阿里云账号. 然后只需要在服务器配置docker配置文件,只需要修改"Ex ...

  6. PHP对象3: public / private / protected

    <?php /* public 可继承, 内外可访问 private 不可, 只内部访问 protected 可继承, 只内部 */ class A{ protected $name; priv ...

  7. Linux实用命令之git-svn

    近日发现了有一个工具,git-svn,可以打通git svn之间的鸿沟. 很适合习惯于git,却需要维护svn代码的同学. 安装 sudo apt-get install git-svn 具体使用就不 ...

  8. kernel随机生成MAC地址的接口

    /**  * eth_random_addr - Generate software assigned random Ethernet address * @addr: Pointer to a si ...

  9. TCP 建立的3次握手, 和关闭的4次握手

    TCP/IP 寻址 TCP/IP 使用 32 个比特或者 4 个 0 到 255 之间的数字来为计算机编址. TCP/IP 连接 用S(service) 代表服务端, C(client) 代表客户端 ...

  10. windows 10开启bash on windows,配置sshd,部署hadoop

    1.安装Bash on Windows 这个参考官网步骤,很容易安装,https://msdn.microsoft.com/en-us/commandline/wsl/install_guide 安装 ...