如何激活文件选择事件

我有一张表格

<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', '&lt;br&gt;Uploading image please wait.....&lt;br&gt;'); return false;">
Upload Image
</button>
</form>

它是上传一个图像。

在这里，我需要点击按钮上传图像，我已经使用 onClick事件。我想删除上传按钮，一旦文件被选中在输入，我想激发事件。我该怎么做？

181469 次浏览
小开

You could subscribe for the onchange event on the input field:

<input type="file" id="file" name="file" />

and then:

document.getElementById('file').onchange = function() {
// fire the upload here
};
小开
最佳答案

Use the change event on the file input. 

$("#file").change(function(){
//submit the form here
});
小开

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:

//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
});
小开

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

  $('#myFile').change(function () {
LoadFile("myFile");//function to do processing of file.
$('#myFile').val('');// set the value to empty of myfile control.
});
小开

Solution for vue users, solving problem when you upload same file multiple times and @change event is not triggering:

 <input
ref="fileInput"
type="file"
@click="onClick"
/>
methods: {
onClick() {
this.$refs.fileInput.value = ''
// further logic for file...
}
}
小开 
<input type="file" @change="onFileChange" class="input upload-input" ref="inputFile"/>


onFileChange(e) {
//upload file and then delete it from input
self.$refs.inputFile.value = ''
}
小开

vanilla js using es6

document.querySelector('input[name="file"]').addEventListener('change', (e) => {
const file = e.target.files[0];
// todo: use file pointer
});
小开 
<input id="fusk" type="file" name="upload" style="display: none;"
onChange=" document.getElementById('myForm').submit();"
>

提交答案