INPUT[type=file]的change事件不触发问题
2017-04-14 18:45
393 查看
在网页上要操作文件通常会使用INPUT[type=file]控件,但这个控件的设计很蛋疼。它不像其它编程语言中文件选择后会触发一个事件,只是让上面的文字改变,而这个改变可能会触发change事件而已。对于文字没改变的选择,change事件则不会触发。
当INPUT[type=file]控件上已经选择过一次文件之后,再次点击它选择同一个文件时change事件就不会触发。因为第二次选择后里面的文字和第一次是一样的,没有改变。还有个更蛋疼情况是有些浏览器会自动记住控件上的文字,即使页面关闭后重新打开还是会恢复到原来的文字。这时候选择同路径的文件也不会触发change事件。
这些问题都是INPUT[type=file]控件蛋疼的设计所引起的,从一般渠道无法解决这个问题。有人建议在点击INPUT[type=file]控件时先清空其文字,这样在选中文件之后自然可以触发change事件。但一些浏览器上对INPUT[type=file]控件的值是只读的,要清空恐怕不容易。但从这里我们可以推广出另一种偷天换日的解决方案。既然值无法写入,为何我们不创建一个新的INPUT[type=file]把旧的替换掉呢?这么一来,需要解决的问题就剩下事件绑定了。这可以通过在容器上绑定事件,之后通过冒泡的方式来获取,而不把事件绑定到目标元素上的方法来解决。下面就是一个不太漂亮的解决办法(由于一些兼容代码写着麻烦,这里直接用了jQuery):
当INPUT[type=file]控件上已经选择过一次文件之后,再次点击它选择同一个文件时change事件就不会触发。因为第二次选择后里面的文字和第一次是一样的,没有改变。还有个更蛋疼情况是有些浏览器会自动记住控件上的文字,即使页面关闭后重新打开还是会恢复到原来的文字。这时候选择同路径的文件也不会触发change事件。
这些问题都是INPUT[type=file]控件蛋疼的设计所引起的,从一般渠道无法解决这个问题。有人建议在点击INPUT[type=file]控件时先清空其文字,这样在选中文件之后自然可以触发change事件。但一些浏览器上对INPUT[type=file]控件的值是只读的,要清空恐怕不容易。但从这里我们可以推广出另一种偷天换日的解决方案。既然值无法写入,为何我们不创建一个新的INPUT[type=file]把旧的替换掉呢?这么一来,需要解决的问题就剩下事件绑定了。这可以通过在容器上绑定事件,之后通过冒泡的方式来获取,而不把事件绑定到目标元素上的方法来解决。下面就是一个不太漂亮的解决办法(由于一些兼容代码写着麻烦,这里直接用了jQuery):
运行<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> $(function(){ form.reset(); //清除浏览器记录的上次记录 var file; $(form).on("change","#file",function(e){ //输出选中结果 console.log(this.value); //每次选中都保存旧元素,并使用新的控件替换 $(this).clone().replaceAll(file=this); }).submit(function(){ //提交时把之前保存的旧元素替换回去 $("#file").replaceWith(file); }); }); </script> <form id="form"> <input type="file" name="file" id="file"><br/> <input type="submit" /> </form>
相关文章推荐
- 关于ajaxFileUpload造成 input[type=file] change事件只能触发一次的问题
- INPUT[type=file]的change事件不触发问题
- 解决JS(Vue)input[type='file'] change事件无法上传相同文件的问题
- 关于WIN10 input type="file"无法触发change问题
- JQuery绑定input[type=file]的change事件问题
- 解决 html input file onchang 事件触发一次后失效问题
- 手机QQ浏览器和微信内置webview对input type="file" 的change事件不灵
- input type="submit",触发后台事件出现问题
- 关于input的file之change事件只第一次有效的问题
- 图片上传时input file change事件多次触发解决
- onclick事件触发 input type=“file” 上传文件
- chrome下input:file无法触发click事件的问题
- input的type=file触发的相关事件
- input file change事件只触发一次
- 图片上传时input file change事件多次触发解决
- ajax回调函数中不能触发input[type='file']事件的解决方法
- 解决vue项目中type=”file“ change事件只执行一次的问题
- <input type="file"> change事件异常处理办法
- input type file onchange上传文件的过程中,遇到同一个文件二次上传无效的问题。
- 关于使用input type=file 标签上传文件的注意细节(上传文件 无法获取文件 问题)