最近做项目,移动端的多文件上传,使用input:file读取文件

<input type='file' name='file' multiple accept='image/*' capture='camera'>

但是在移动端 设置 multiple 属性是不起作用的,设置此属性PC端可以多选而移动端无法多选。

我使用的解决方案是动态添加 input:file标签。,每添加一个标签就出发一次click事件读取文件。然后选择相片并且将相片显示在页面上。

一开始直接在通过JQuery绑定change事件,结果发现无法触发;接着用原生,也不行;最后直接将事件绑定到标签上也是不行的,全都触发不了change事件。

查询过后发现是input:file的问题  https://www.cnblogs.com/axl234/p/3897399.html

进入页面执行JS时,先将表单 RESET掉   form,reset();

然后将change事件绑定到form表单上,采用事件委托。顺利解决。

学习到知识是快乐的,充满成就感的。

input:file onchange事件无法读取解决方法的更多相关文章

  1. 安装coreseek cannot find input file: src/Makefile.in 错误解决方法

    安装coreseek 出现了cannot find input file: src/Makefile.in 解决方法如下 >autoheader >automake --add-missi ...

  2. input的onchange事件实际触发条件与解决方法

    input中onchange事件已经属于元老级别了,并且现在同onclick一样使用频率很高,然而onchange的机制实际上有很多童鞋并不清楚,我们通过实例来分析这个事件的特征. 触发onchang ...

  3. 织梦系统中出现DedeTag Engine Create File False提示原因及解决方法

    今天更新网站时dedecms系统时,遇到一个问题:DedeTag Engine Create File False  出现这样的提示. 其实这也不算是什么错误,我个人觉得最重要的一点就是根目录下没有给 ...

  4. InnoDB: Operating system error number 87 in a file operation. 错误87的解决方法

    InnoDB: Operating system error number 87 in a file operation. 错误87的解决方法 140628  8:10:48 [Note] Plugi ...

  5. Parse error: syntax error, unexpected end of file in *.php on line * 解决方法

    Parse error: syntax error, unexpected end of file in *.php on line * 解决方法   这篇文章主要介绍了PHP错误Parse erro ...

  6. React中,input外边如果包一个div,可以把input的onChange事件绑定到div上面,并且也生效

    最近第一次开始学习封装组件,遇到几个比较神奇的问题. 首先就是如果input外边包一个div,如果把input的onChange事件绑定到div上,也会生效 <div onChange={(e) ...

  7. input file 样式以及获取选择文件方法集合

    样式一(http://www.cnblogs.com/jason-liu-blogs/archive/2013/06/13/3133377.html) <style> a{display: ...

  8. nginx File not found 错误分析与解决方法

    使用php-fpm解析PHP,出错提示如下:"No input file specified","File not found",原因是php-fpm进程找不到 ...

  9. angular input=file ng-change事件

    首先 ng-change事件要与ng-model绑定  但是 当input 的  type=file时   ngchange事件是失效的  我们可以用图中的onchange事件去代替 其次 如果想在这 ...

随机推荐

  1. 一张图看懂Mysql的join连接

    INNER JOIN:当两个表中都匹配时返回行. LEFT JOIN:返回左表中的所有行,即使右表中没有匹配项也是如此. RIGHT JOIN:返回右表中的所有行,即使左表中没有匹配项也是如此. FU ...

  2. 自定义多选框(checkbox)和单选框(radio)css样式

    直接上代码: input[type="radio"],input[type="checkbox"]{ -webkit-appearance: none; out ...

  3. Nginx的rewrite(地址重定向)剖析

    1.rewrite语法: 指令语法:rewrite regex replacement[flag]; 默认值:none 应用位置:server.location.if rewrite是实现URL重定向 ...

  4. Android 优秀开源项目

    以下是本人日常工作中收集的比较不错的Android开源项目 roottools: RootTools gives Rooted developers easy access to common roo ...

  5. window.event.returnvalue=false;不起作用

    遇到了这个问题,这儿也有人问了, http://bbs.csdn.net/topics/390691844,按着这边的说法,把它换成return false ,试了下果然有效.初学DOM,这两者的区别 ...

  6. java持有对象【2】ArrayList容器续解

    此为JDK API1.6.0对ArrayList的解释. ArrayList 使用java泛型创建类很复杂,但是应用预定义的泛型很简单.例如,要想定义用来保存Apple对象的ArrayList,可以声 ...

  7. JSP基本语法总结【1】(jsp工作原理,脚本元素,指令元素,动作元素)

    时隔半年,回头对jsp复习整理一下,温故而知新. jsp工作原理: jsp服务器管理jsp页面分两个阶段:转换阶段(translation phase)和执行阶段(execution phase). ...

  8. springcloud 入门 6 (断路器hystrix)

    hystrix:断路器 断路器是为了解决服务故障的“雪崩”,   雪崩是指,由于网络原因或者自身的原因,服务并不能保证100%可用,如果单个服务出现问题,调用这个服务就会出现线程阻塞,此时若有大量的请 ...

  9. 如何扩展 Azure 资源组中虚拟机的 OS 驱动器

    概述 在资源组中通过从 Azure 应用商店部署映像来创建新的虚拟机 (VM) 时,默认的 OS 驱动器空间为 127 GB. 尽管可以将数据磁盘添加到 VM(数量取决于所选择的 SKU),并且我们建 ...

  10. 如何加密 Windows VM 上的虚拟磁盘

    为了增强虚拟机 (VM) 的安全性以及符合性,可以加密 Azure 中的虚拟磁盘. 磁盘是使用 Azure 密钥保管库中受保护的加密密钥加密的. 可以控制这些加密密钥,以及审核对它们的使用. 本文详细 ...