INPUT[type=file]的change事件不触发问题
在网页上要操作文件通常会使用INPUT[type=file]控件,但这个控件的设计很蛋疼。它不像其它编程语言中文件选择后会触发一个事件,只是让上面的文字改变,而这个改变可能会触发change事件而已。对于文字没改变的选择,change事件则不会触发。
当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>
转载于:https://www.cnblogs.com/axl234/p/3897399.html
INPUT[type=file]的change事件不触发问题相关推荐
- <input type=“file“> change事件异常处理办法
change事件异常处理办法 参考文章: (1) change事件异常处理办法 (2)https://www.cnblogs.com/Ricky-Huang/p/5655591.html 备忘一下.
- html的<input type='radio'/>change事件坑
一.坑复现 <div><input type='radio' name='test' value='1' checked/>1<span id='test_a'>a ...
- html file onchange事件,input type=file 的onchange事件
οnclick="return FileUpload_onclick()" οnchange="return FileUpload_onselect()"/&g ...
- ajax回调函数中不能触发input[type='file']事件的解决方法
今天在做文件上传遇到一个问题,在ajax回调成功后触发input[type='file']元素的事件时始终不能弹出文件选择对话框 ,于是开始各种问题的排除,最终我发现在ajax 异步提交不行,要同步提 ...
- 自定义input[type=file]的兼容样式
input[type="file"]的样式在各个浏览器中的表现不尽相同: 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外,当 ...
- Input type=“file“上传文件change事件只触发一次解决方案
Input type="file"上传文件change事件只触发一次解决方案 参考文章: (1)Input type="file"上传文件change事件只触发 ...
- 监听input type=file 文件上传取消事件
在做项目的时候,需要根据是否上传图片,(前提是已经上传文件,再次上传取消时,监听取消事件)进而判断页面变化.通过查阅相关资料,发现chane事件并不能监听取消,于是从另外一种角度:判断上传的文件是否有 ...
- onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案) 参考文章: (1)onchange监听inpu ...
- input[type=file]属性
title: input[type=file]属性 date: 2017年8月11日 21:04:48 tags: html categories: 教程 author: "JiaWei&q ...
最新文章
- Bug tracker .net 部署经验(完善中)
- React + Koa 实现服务端渲染(SSR)
- python之文件读写和异常处理
- P2617 Dynamic Rankings(带修主席树)
- 问题生成的多样性会在多大程度上帮助下游QA任务?
- Eclipse使用技巧
- mysql2008优化_SQL server 2008 数据库优化常用脚本
- 《C语言从入门到精通》pdf
- linux与mac和windows的 文件共享
- 【算法学习】蝙蝠算法简介
- vue单页面SEO优化
- ROS PGM格式文件详解 | 九七的ROS
- Zabbix-agent部署
- 财税SaaS起风,税友股份成“中国版Intuit”?
- java util包排序_实现java.util.Comparator接口,对对象集合进行多属性组合排序
- 一路两输入正与门SN74AHC1G08学习
- 中国上市互联网公司市值排名
- Thinkjs——定时任务配置代码示例
- 兼容IE AJAX封装 全步骤
- oracle服务 linux启动命令