Javascript 替代 <input type='file' /> 中的 onchange 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2133807/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
alternate to onchange event in <input type='file' />
提问by Yasir Laghari
Seems really a simple thing but can't figure it out. I've been using the onchange event on element and it works well. Once the user browses and selects a file, I get the path and upload it using a my custom js function.
看起来真的很简单，但想不通。我一直在元素上使用 onchange 事件，它运行良好。一旦用户浏览并选择了一个文件，我就会获取路径并使用我的自定义 js 函数上传它。
The problem is this doesn't work if a user selects the same file twice in a row, the onchange doesn't fire (which makes sense since nothing changed) but in my case it's important for me to capture that event too, get the path and upload.
问题是如果用户连续两次选择同一个文件，这不起作用，onchange 不会触发（这是有道理的，因为没有任何更改）但在我的情况下，捕获该事件对我来说也很重要，获取路径和上传。
Edit
编辑
(Similar to Clearing <input type='file' /> using jQuery, not sure if I should resolve this as duplicate)
（类似于使用 jQuery 清除 <input type='file' />，不确定是否应该将其解析为重复项）
采纳答案by raveren
You can just remove the input and create an identical one with javascript - the new one will be empty.
您可以删除输入并使用 javascript 创建一个相同的输入 - 新输入将是空的。
(edited answer to be straight to the point, comments are irrelevant now)
（编辑答案直截了当，评论现在无关紧要）
回答by tfwright
You could have the choose file button clear the contents of the input onclick, that way even even if they choose the same file your event will still trigger. Of course, then your onchange handler will have to check for blank values, but it should probably be doing something similar or more anyway if it's going to use that value to upload a file...
您可以使用选择文件按钮清除 onclick 输入的内容，这样即使他们选择了相同的文件，您的事件仍会触发。当然，那么您的 onchange 处理程序将不得不检查空白值，但如果要使用该值上传文件，它可能应该做类似或更多的事情......
回答by Andrey
You could not fire change event second time on the file input, but you can fire change event on the span. Below works in chrome and ff. I didn't check in IE.
$('#change_span').bind('change',function(){
alert($('#file_1').val())
})
您不能在文件输入上第二次触发更改事件，但您可以在跨度上触发更改事件。以下适用于 chrome 和 ff。我没有在 IE 中检查。
$('#change_span').bind('change',function(){
alert($('#file_1').val())
})
<span id='change_span'><input id="file_1" type="file"></span>
<span id='change_span'><input id="file_1" type="file"></span>
回答by WebWanderer
Set the value of the input to "" in your onchange callback. That way, if the same file is selected the next time around, the onchange event will still be triggered because the value is different than "".
在 onchange 回调中将输入的值设置为 ""。这样，如果下次选择相同的文件，仍然会触发 onchange 事件，因为该值与 "" 不同。
document.getElementById('files').value = "";
回答by Marius
There really isn't any way to fix that. If you add any other listener or timer, then you will potentially upload the file even when the user doesn't want it to (eg, with an onclick). Are you sure uploading the same file can't be done in another way? What about clearing the input once the upload has started (or replace it with a new input if you can't clear it).
真的没有办法解决这个问题。如果您添加任何其他侦听器或计时器，那么即使用户不希望上传文件（例如，使用 onclick），您也可能上传文件。您确定不能以其他方式上传相同的文件吗？上传开始后如何清除输入（如果无法清除，则将其替换为新输入）。
回答by elshnkhll
If you don't want to use jQuery
如果你不想使用 jQuery
<form enctype='multipart/form-data'>
<input onchange="alert(this.value); return false;" type='file'>
<br>
<input type='submit' value='Upload'>
</form>
It works fine in Firefox, but for Chrome you need to add this.value=null;after alert.
它在 Firefox 中运行良好，但对于 Chrome，您需要this.value=null;在警报后添加。
回答by Daniel Sloof
Is this behavior only present in IE? If so, it may be related to this issue:
jQuery change event on <select> not firing in IE
In essence: You may need to check for onClick instead.
此行为仅存在于 IE 中吗？如果是这样，则可能与此问题有关：
<select> 上的 jQuery 更改事件未在 IE 中触发
本质上：您可能需要改为检查 onClick。
回答by oreoshake
function resetFileInput ($element) {
var clone = $element.clone(false, false);
$element.replaceWith(clone);
}
And then use live:
然后使用实时：
$('#element_id').live('change', function(){
...
});
Worked well for me!
对我来说效果很好！
