input:file onchange事件无法读取解决方法
Posted kuhntseng
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了input:file onchange事件无法读取解决方法相关的知识,希望对你有一定的参考价值。
最近做项目,移动端的多文件上传,使用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事件无法读取解决方法的主要内容,如果未能解决你的问题,请参考以下文章
input file 添加图片预览 绑定onchange执行函数 重复添加不执行onchange函数
input file获取选择图片的本地路径和base64路径
input:file 选择多个文件 用FileReader读取为二进制