最近做项目,移动端的多文件上传,使用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. SD从零开始25-28

    SD从零开始25 装运的组织单元(Organizational Units in Shipping) 组织结构-后勤Organizational Structure-Logistics Plant在后 ...

  2. java io详解(1)

    一.java io结构图 二.java io的开始:文件 三.字节流: 一.java io结构图 流分类: 1.Java的字节流    InputStream是所有字节输入流的祖先,而OutputSt ...

  3. Mysql使用优化之处(转)

    1 开启事务之前需要rollback 连接句柄.(清理垃圾)2 mysql_ping 失败,程序需要处理重连逻辑:3 mysql_query()执行的SQL语句是一个以‘/0’结尾的字符串,而mysq ...

  4. WebBrowser实现:自动填充网页上的用户名和密码并点击登录按钮

    private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e) { ...

  5. 通过javascript添加一行

    <html><head> <title>添加新的行</title></head><body> <div onclick=& ...

  6. Rancher 添加主机无法显示、添加主机无效的解决办法

    在 Rancher UI 中,添加主机,在 Shell ssh 运行了,然后 点击 “关闭” 按钮,发现没有显示如何主机. 第一步,先去查看应用是否正常,就是 应用 - 全部应用 如果显示是 unhe ...

  7. 第 15 章 位操作(invert4)

    /*------------------------------------ invert4.c -- 使用位操作显示二进制 ------------------------------------* ...

  8. Priority Queue

    优先队列 集合性质的数据类型离不开插入删除这两操作,主要区别就在于删除的时候删哪个,像栈删最晚插入的,队列删最早插入的,随机队列就随便删,而优先队列删除当前集合里最大(或最小)的元素.优先队列有很多应 ...

  9. SDN 第四次上机作业

    1.建立以下拓扑,并连接上ODL控制器. 2.利用ODL下发流表,使得h3在10s内ping不通h1,10s后恢复. 3.借助Postman通过ODL的北向接口下发流表,再利用ODL北向接口查看已下发 ...

  10. leetcode 2. Add Two Numbers [java]

    注意点: 最后的进位 (l1 == null || l1.next == null) break; public ListNode addTwoNumbers(ListNode l1, ListNod ...