Javascript 文件输入更改事件只触发一次

我使用HTML5文件的一些特性制作了一个小脚本，它允许您选择一个或多个文件，每次它都会写入文件名。一切都正常工作，只有检测到文件输入值更改的事件才会触发一次，那么如何使它触发每次更改而不是第一次更改

顺便说一下，这是我做的：

---

似乎正在删除

更改
事件侦听器，因为您正在使用
innerHTML
更新输入本身所在的相同元素（
wrapper
）。因此，
wrapper
元素的内容（包括文件输入）被重新呈现，并且在这个过程中，事件侦听器被删除（或者，它连接到不再存在的元素）

这与您的代码完全相同，只是它在与输入所在元素不同的元素中打印选定的文件名。而且它是有效的（无论如何，在WebKit中）

（我基本上复制了您的代码，在修改
wrapper.innerHTML
之后，只添加了一行代码来重新注册事件侦听器）

因此，
change
事件确实会为每个更改触发，但是通过在输入的父元素上使用
innerHTML
来删除正在观察的输入


我真的不知道这是不是一个合法的浏览器错误。
innerHTML
可以“覆盖”现有的输入元素，但浏览器足够智能，不会重置输入值，因此您可能会认为侦听器也会留下来……所以……好吧，如果您想上传两次，请清除文件输入值

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

以上这些对我都不起作用，实际上每次更改时，我都必须创建一个新的“虚拟”文件输入字段，以便再次捕获更改事件

我的过程是：

一旦改变
-将文件输入移动到另一个元素
-创建新的文件输入以再次捕获更改事件
addEventListener不适用于IE8（不确定IE9以后的版本）。我们需要使用attachEvent listiner。如果需要跨浏览器支持，请使用此选项

if (!inputfile.addEventListener) {
    inputfile.attachEvent("onclick", setCheckedValues); //IE8
}else {
    inputfile.addEventListener("click", setCheckedValues, false); //Other browser
}

不要使用onchange，而是使用oninput事件

 $scope.ShowIcon = function (input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#iAIcon')
                    .attr('src', e.target.result)
            };
            reader.readAsDataURL(input.files[0]);           
        }        
    }


好的，根据@Flambino，输入被重新呈现。不管出于什么原因，这对我来说都无关紧要。
$on（'change'，回调）功能丢失

尝试使用.delegate函数，我绝对喜欢！

好的，所以委托是完全相同的，它只是告诉jquery，如果屏幕上呈现的元素有一个特定的句柄，请将一个功能附加到它

因此，即使元素被重新渲染，它仍将继续工作

$(document).delegate('.file_upload_btn', 'change', function(){});

你可能会认为这是一个一次性功能&比如说有什么区别，但这为我节省了很多项目时间。
我不知道为什么，但这个老问题的答案都没有那么简单。以下是今天轻松完成此任务的方法

使用jquery


$（'#myfileinputfieldid'）[0]。onchange=function（e）{
//用e做一些事情，比如在画布上写一张图片或者泡一杯美味的咖啡
e、 target.value=''；
};我通过在自己的回调结束时重新分配.change函数，在每个新文件上启动.change回调：

$('#myfileinputfieldid').change(function (event) {
    scope.processFile(event.target.files[0]);
});

scope.processFile = function(fileStruct) {
    doStuff;

    // Reassign the onchange callback.
    $('#myfileinputfieldid').change(function (event) {
        scope.processFile(event.target.files[0]);
    });
};

在我的例子中，我使用ajax上传文件。
我只是用onclick事件处理程序清除输入的值

  $('#myFile').click(function(e) {e.target.value = '';});
  $('#myFile').change(function(e) { 
           var file = e.target.value;
           var formdata = new FormData();
           formdata.append('file', file, 'somefile');
           $.ajax({
             type: 'POST',
             url: './uploadFile',
             data: formdata,
             processData: false,
             contentType: false,
             success: function(data){

             }
        });
  });

无论这是否是一个合法的浏览器错误，感谢您找到我的问题来源。[[1]：请阅读我下面的评论。Onchange只在第一次启动，因为您必须清除上一个文件选择的值。为了清楚起见…e.target.value=''或e.target.value=null，等等…我在Chrome 66上遇到了同样的情况。如何在不使用jquery的情况下实现相同的行为？e.target.value=''非常感谢！！保存了我的日志白天