Question

html input标签中的file，点击取消后并没有触发onchange事件

<input type="file" onchange="abc()" id="a"/>
如这样一个标签，当我点击选择并确定的时候，会改变value的值 ，从而触发onchange事件，但让我重新选择一张图片，但在弹出对话框的时候，我又不想选了，所以我选择了取消，接下来，标签内的原地址消失了，却没有触发onchange事件，说明file框内的地址没有了，但value里肯定还是那个值，这个BUG该怎么解决，我想要他点击取消的时候同样触发onchange事件，或者点击弹窗中的取消后，那个file框内还是原有的地址 ，求大神

Answer 1

1、在页面点击上传时需要提交后台，然后再把图片显示出来，发现onchange事件在第一次点击的时候是执行的，但是第二次第三次事件就失灵了，后来是利用remove将本元素移除，再通过生成相同元素的方法来解决onchange事件的失灵事件。

2、用jquery实现：
var fileName = $("#file").val();if(fileName==""){ //点击取消，取消事件的编写return;}

3、type=txt 的搜索文本框，我们这么处理onfocus="this.value=''" onblur="if(!value){value=defaultValue;}"

Answer 2

经我测试出现以下情况：

1. 第二次点击出现选择图片窗口后再点击取消，value值已经被置空了，触发了change事件，这是在chrome浏览器中

2. 在IE和火狐浏览器中第二次点击出现选择图片窗口后再点击取消，value值没有变化，也没有触发change事件

   
   

   根据这个问题可以有一个解决方案就是设置一个全局的变量来存储这个file中的value值，在change事件中判断当value值为空则将他原来的值重新赋值到file中

Answer 3

type=txt 的搜索文本框，我们这么处理
onfocus="this.value=''" onblur="if(!value){value=defaultValue;}"
试试交给其他事件

Answer 4

用jquery实现：
var fileName = $("#file").val();
if(fileName==""){
//点击取消，取消事件的编写
return;
}
用js实现是一样的，选择取消的话，value就是为空了，不知道你是要这样做吗？
不是这样做的话，有些问题可以换种实现方式，不必非要揪住一种解决办法