Javascript 如何在文件选择时触发事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5942821/
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
how to fire event on file select
提问by ptamzz
I've a form as
我有一个表格
<form onSubmit="return disableForm(this);" action="upload.php" method="post" name="f" id="wizecho" enctype="multipart/form-data">
<input type="file" name="file" />
<button onClick="return disableForm(this),ajaxUpload(this.form,'wizecho_upload.php', '<br>Uploading image please wait.....<br>'); return false;">
Upload Image
</button>
</form>
It is to upload an image.
就是上传图片。
Here I need to click on the button to upload the image and I've to use onClickevent. I want to remove the upload button and as soon as the file is selected at the input, I want to fire the event. How do I do that??
在这里我需要点击按钮上传图片，我必须使用onClick事件。我想删除上传按钮，只要在输入处选择了文件，我就想触发该事件。我怎么做？？
回答by Vincent Ramdhanie
Use the change event on the file input.
在文件输入上使用更改事件。
$("#file").change(function(){
//submit the form here
});
回答by Darin Dimitrov
You could subscribe for the onchange event on the input field:
您可以在输入字段上订阅 onchange 事件：
<input type="file" id="file" name="file" />
and then:
进而：
document.getElementById('file').onchange = function() {
// fire the upload here
};
回答by applecrusher
This is an older question that needs a newer answer that will address @Christopher Thomas's concern above in the accept answer's comments. If you don't navigate away from the page and then select the file a second time, you need to clear the value when you click or do a touchstart(for mobile). The below will work even when you navigate away from the page and uses jquery:
这是一个较旧的问题，需要一个较新的答案来解决@Christopher Thomas 在接受答案的评论中的上述问题。如果您没有离开页面然后再次选择文件，则需要在单击或执行 touchstart（对于移动设备）时清除该值。即使您离开页面并使用 jquery，以下内容也能正常工作：
//the HTML
<input type="file" id="file" name="file" />
//the JavaScript
/*resets the value to address navigating away from the page
and choosing to upload the same file */
$('#file').on('click touchstart' , function(){
$(this).val('');
});
//Trigger now when you have selected any file
$("#file").change(function(e) {
//do whatever you want here
});
回答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.
});
回答by Pikolinos
Solution for vue users, solving problem when you upload same file multiple times and @change event is not triggering:
vue用户的解决方案，解决多次上传同一个文件且@change事件不触发的问题：
<input
ref="fileInput"
type="file"
@click="onClick"
/>
methods: {
onClick() {
this.$refs.fileInput.value = ''
// further logic for file...
}
}
