如何在文件选择中触发事件

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', '&lt;br&gt;Uploading image please wait.....&lt;br&gt;'); 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 onClick event. 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事件。我想删除上载按钮，一旦在输入中选择了文件，我想启动事件。我该怎么做?

3 个解决方案

#1

Use the change event on the file input.

在文件输入中使用change事件。

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

#2

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
};

#3

This is an older question that needs a newer answer that will address @Christopher Thomas's concern above in the accept answer's comments. To 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) {

}

#1