Question

看起来真的很简单，但无法弄明白。我一直在元素上使用onchange事件，它运行良好。一旦用户浏览并选择了一个文件，我就会获得路径并使用我的自定义js函数上传它。

问题是，如果用户连续两次选择相同的文件，这不起作用，onchange不会触发（这是有道理的，因为没有任何改变）但在我的情况下，对我来说捕获该事件也很重要，获取路径并上传。

修改

（与Clearing <input type='file' /> using jQuery类似，不确定我是否应将此解析为重复）

Answer 1

您可以删除输入并使用javascript创建相同的输入 - 新的输入将为空。

（编辑的答案直截了当，评论现在无关紧要）

Answer 2

您可以通过选择文件按钮清除输入onclick的内容，即使他们选择相同的文件，您的事件仍会触发。当然，那么你的onchange处理程序将不得不检查空值，但是如果要使用该值来上传文件，它应该做类似或更多的事情...

Answer 3

真的没有办法解决这个问题。如果您添加任何其他侦听器或计时器，那么即使用户不希望它（例如，使用onclick），您也可能会上传该文件。您确定无法以其他方式上传相同的文件吗？如果上传开始后清除输入怎么样（如果无法清除，则用新输入替换它）。

Answer 4

您无法在文件输入上第二次触发更改事件，但您可以在范围上触发更改事件。以下适用于chrome和ff。我没有在IE中查看。 $('#change_span').bind('change',function(){ alert($('#file_1').val()) })

<span id='change_span'><input id="file_1" type="file"></span>

Answer 5

将输入值设置为＆＃34;＆＃34;在你的onchange回调中。这样，如果下一次选择了相同的文件，onchange事件仍将被触发，因为该值不同于＆＃34;＆＃34;。

document.getElementById('files').value = "";

Answer 6

这种行为只出现在IE中吗？如果是这样，可能与此问题有关：
jQuery change event on <select> not firing in IE
实质上：您可能需要检查onClick。

Answer 7

function resetFileInput ($element) {
  var clone = $element.clone(false, false);
  $element.replaceWith(clone);
}

然后使用live：

$('#element_id').live('change', function(){
...
});

对我来说工作得很好！

Answer 8

如果您不想使用jQuery

<form enctype='multipart/form-data'>
    <input onchange="alert(this.value); return false;" type='file'>
    <br>
    <input type='submit' value='Upload'>
</form>

它在Firefox中运行良好，但对于Chrome，您需要在警报后添加this.value=null;。

替换<input type =“file”/>中的onchange事件

修改

8 个答案: