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. Go语言 5 函数

    文章由作者马志国在博客园的原创,若转载请于明显处标记出处:http://www.cnblogs.com/mazg/ 今天,我们来学习Go语言编程的第五章,函数.首先简单说一下函数的概念和作用.函数是一 ...

  2. Android Service使用简单介绍

    作为一个android初学者,经常对service的使用感到困惑.今天结合Google API 对Service这四大组件之一,进行简单使用说明. 希望对和我一样的初学者有帮助,如有不对的地方,也希望 ...

  3. 深入理解Spring系列之六:bean初始化

    转载 https://mp.weixin.qq.com/s/SmtqoELzBEdZLo8wsSvUdQ <深入理解Spring系列之四:BeanDefinition装载前奏曲>中提到,对 ...

  4. [Leetcode] Longest Palindromic Subsequence

    Longest Palindromic Subsequence 题解 题目来源:https://leetcode.com/problems/longest-palindromic-subsequenc ...

  5. 安全测试===CSRF攻击简介

    http://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html

  6. 在64位ubuntu中安装代码比较工具beyond compare

    1,//从http://www.scootersoftware.com/download.php 官方地址下载 bcompare-3.3.2.14050.tar.gz 或 bcompare-4.0.7 ...

  7. java中8种数据类型和默认值所占字节数

    java 8种基本数据类型的默认值及所占字节数 通过一段代码来测试一下 8种基本数据类型的默认值 1 package dierge; 2 3 public class Ceshi { 4 int a; ...

  8. [转载]FFmpeg完美入门[2] - FFmpeg参数说明

     1 通用选项 -L license -h 帮助 -fromats 显示可用的格式,编解码的,协议的. -f fmt 强迫采用格式fmt -i filename 输入文件 -y 覆盖输出文件 -t d ...

  9. Debian系网络配置 /etc/network/interfaces

    说Debian系的网卡配置跟Redhat系很不一样,Redhat是放在/etc/sysconfig/network-scripts目录下面的一大堆文件里面,要修改?你一个一个文件来过吧.Debian系 ...

  10. python 随机字符串

    pip3 install pillow 读取硬盘中的文件,在页面显示 f = open('static/imgs/yj.png','rb') data = f.read() f.close() ret ...