文件输入更改事件仅触发一次

Question

我使用了一些HTML5文件功能制作了一个小脚本,它允许您选择一个或多个文件,并且每次都会写入文件的名称.一切都按原样运行,只有检测文件输入的值变化的事件才会触发一次,那么我怎样才能使每次变化都触发,而不仅仅是第一次变化？

顺便说一句,这是我做的:http: //tamir.netspot.co.il/html5/files/

Answer 1

如果要上传两次,请清除文件输入值

$('input[type="file"]').val(null);

jsfiddle测试

Answer 2

似乎change正在删除事件侦听器,因为您正在使用innerHTML更新wrapper输入本身所在的相同元素().因此,wrapper元素的内容(包括文件输入)正在被重新呈现,并且在此过程中,事件侦听器被移除(或者,它被连接到不再存在的元素).

这是一个简单的jsfiddle,它与你的代码完全相同,只是它将选定的文件名打印在与输入所在元素不同的元素中.它可以工作(无论如何都在WebKit中)

这是进一步的证明(我基本上复制了你的代码,并且在修改后只添加了一行来重新注册事件监听器wrapper.innerHTML)

因此,change事件会针对每个更改触发,但是通过使用innerHTML输入的父元素来删除正在观察的输入.

老实说,我不知道这是否是合法的浏览器错误.innerHTML"覆盖"现有的输入元素是有意义的,但浏览器足够智能,不会重置输入的值,所以你认为听众也会坚持下去......所以...好吧,这让人很困惑

Answer 3

我不知道为什么，但这个老问题的答案都不是那么简单。这是今天轻松做到这一点的方法......

用jquery...

$('#myfileinputfieldid')[0].onchange = function(e) {
 //do something with e.  Like write an image to a canvas or make a yummy cup of coffee
  e.target.value = '';
};

这就是在您将值更改为下一次单击文件输入时选择的文件以外的值之后，onchange 事件将触发。