Javascript HTML 输入文件选择事件在选择同一文件时不会触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12030686/
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
HTML input file selection event not firing upon selecting the same file
提问by dronus
Is there any chance to detect every file selection the user made for an HTML inputof type fileelement?
是否有机会检测用户为元素input类型的 HTML 所做的每个文件选择file？
This was asked many times before, but the usually proposed onchangeevent doesn't fire if the user select the same file again.
之前多次询问过这个问题，但是onchange如果用户再次选择相同的文件，通常建议的事件不会触发。
回答by Brian Ustas
Set the value of the inputto nullon each onclickevent. This will reset the input's value and trigger the onchangeevent even if the same path is selected.
的值设置input到null每个onclick事件。即使选择了相同的路径，这也会重置input的值并触发onchange事件。
input.onclick = function () {
this.value = null;
};
input.onchange = function () {
alert(this.value);
};?
Here's a DEMO.
这是一个演示。
Note: It's normal if your file is prefixed with 'C:\fakepath\'. That's a security feature preventing JavaScript from knowing the file's absolute path. The browser still knows it internally.
注意：如果您的文件以“C:\fakepath\”为前缀是正常的。这是一项安全功能，可防止 JavaScript 知道文件的绝对路径。浏览器内部仍然知道它。
回答by elshnkhll
<form enctype='multipart/form-data'>
<input onchange="alert(this.value); this.value=null; return false;" type='file'>
<br>
<input type='submit' value='Upload'>
</form>
this.value=null;is only necessary for Chrome, Firefox will work fine just with return false;
this.value=null;只有 Chrome 需要，Firefox 也可以正常工作 return false;
Here is a FIDDLE
这是一把小提琴
回答by Xacur Aphrantus
In this article, under the title "Using form input for selecting"
在这篇文章中，在标题“使用表单输入进行选择”下
http://www.html5rocks.com/en/tutorials/file/dndfiles/
http://www.html5rocks.com/en/tutorials/file/dndfiles/
<input type="file" id="files" name="files[]" multiple />
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
// Code to execute for every file selected
}
// Code to execute after that
}
document.getElementById('files').addEventListener('change',
handleFileSelect,
false);
</script>
It adds an event listener to 'change', but I tested it and it triggers even if you choose the same file and not if you cancel.
它为“更改”添加了一个事件侦听器，但我对其进行了测试，即使您选择相同的文件，它也会触发，而不是在您取消时触发。
回答by Trafalgar Law
Use onClick event to clear value of target input, each time user clicks on field. This ensures that the onChange event will be triggered for the same file as well. Worked for me :)
每次用户点击字段时，使用 onClick 事件清除目标输入的值。这确保了 onChange 事件也会为同一个文件触发。为我工作:)
onInputClick = (event) => {
event.target.value = ''
}
<input type="file" onChange={onFileChanged} onClick={onInputClick} />
Using TypeScript
使用打字稿
onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
const element = event.target as HTMLInputElement
element.value = ''
}
回答by Shashwat Gupta
handleChange({target}) {
const files = target.files
target.value = ''
}
回答by Mohit Singh
Do whatever you want to do after the file loads successfully.just after the completion of your file processing set the value of file control to blank string.so the .change() will always be called even the file name changes or not. like for example you can do this thing and worked for me like charm
在文件加载成功后做任何你想做的事情。在文件处理完成后，将文件控制的值设置为空字符串。这样 .change() 将始终被调用，即使文件名更改或不更改。比如说你可以做这件事并且像魅力一样为我工作
$('#myFile').change(function () {
LoadFile("myFile");//function to do processing of file.
$('#myFile').val('');// set the value to empty of myfile control.
});
