cara mengaktifkan acara pada file pilih

Saya sudah berbentuk sebagai

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

Ini untuk mengunggah gambar.

Di sini saya perlu mengklik tombol untuk mengunggah gambar dan saya telah menggunakan onClickacara. Saya ingin menghapus tombol unggah dan segera setelah file dipilih di masukan, saya ingin mengaktifkan acara tersebut. Bagaimana aku melakukan itu??

Gunakan acara perubahan pada input file.

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

Anda dapat berlangganan acara onchange di kolom input:

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

lalu:

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

Ini adalah pertanyaan lama yang membutuhkan jawaban lebih baru yang akan menjawab kekhawatiran @Christopher Thomas di atas dalam komentar jawaban terima. Jika Anda tidak keluar dari halaman lalu memilih file untuk kedua kalinya, Anda perlu menghapus nilainya saat mengklik atau melakukan touchstart (untuk seluler). Di bawah ini akan berfungsi bahkan ketika Anda keluar dari halaman dan menggunakan 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
});

Lakukan apa pun yang ingin Anda lakukan setelah file berhasil dimuat. Tepat setelah selesai pemrosesan file Anda, atur nilai kontrol file ke string kosong. Sehingga .change () akan selalu dipanggil meskipun nama file berubah atau tidak. seperti misalnya Anda dapat melakukan hal ini dan bekerja untuk saya seperti pesona

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

Solusi untuk pengguna vue, memecahkan masalah saat Anda mengunggah file yang sama beberapa kali dan peristiwa @change tidak memicu:

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

document.querySelector('input[name="file"]').addEventListener('change', (e) => {
 const file = e.target.files[0];
  // todo: use file pointer
});