làm thế nào để kích hoạt sự kiện trên chọn tệp

Tôi có dạng

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

Nó là để tải lên một hình ảnh.

Ở đây tôi cần nhấp vào nút để tải lên hình ảnh và tôi đã sử dụng onClicksự kiện. Tôi muốn xóa nút tải lên và ngay sau khi tệp được chọn ở đầu vào, tôi muốn kích hoạt sự kiện. Làm thế nào để làm điều đó??

Sử dụng sự kiện thay đổi trên đầu vào tệp.

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

Bạn có thể đăng ký sự kiện onchange trên trường đầu vào:

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

và sau đó:

document.getElementById('file').onchange = function() {
    // fire the upload here
};

Đây là một câu hỏi cũ hơn cần một câu trả lời mới hơn sẽ giải quyết mối quan tâm của @Christopher Thomas ở trên trong nhận xét của câu trả lời chấp nhận. Nếu bạn không điều hướng khỏi trang và sau đó chọn tệp lần thứ hai, bạn cần xóa giá trị khi bạn nhấp hoặc thực hiện khởi động lại (dành cho thiết bị di động). Phần dưới đây sẽ hoạt động ngay cả khi bạn điều hướng khỏi trang và sử dụng 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
});

Làm bất cứ điều gì bạn muốn làm sau khi tệp tải thành công. Chỉ cần sau khi hoàn tất quá trình xử lý tệp của bạn, hãy đặt giá trị của điều khiển tệp thành chuỗi trống. Do đó, .change () sẽ luôn được gọi ngay cả khi tên tệp có thay đổi hay không. chẳng hạn như bạn có thể làm điều này và làm việc cho tôi như một sự quyến rũ

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

Giải pháp cho người dùng vue, giải quyết vấn đề khi bạn tải lên cùng một tệp nhiều lần và sự kiện @change không kích hoạt:

 <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 = ''
}