dosya seçiminde olay nasıl tetiklenir

Bir formum var

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

Bir görüntü yüklemektir.

Burada görüntüyü yüklemek için butona tıklamam gerekiyor ve onClickolayı kullanmam gerekiyor . Yükle düğmesini kaldırmak istiyorum ve girişte dosya seçilir seçilmez olayı tetiklemek istiyorum. Bunu nasıl yaparım??

Dosya girişindeki değişiklik olayını kullanın.

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

Giriş alanında onchange olayına abone olabilirsiniz:

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

ve sonra:

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

Bu, @Christopher Thomas'ın yukarıdaki yanıt yanıtının yorumlarındaki endişesini ele alacak daha yeni bir yanıta ihtiyaç duyan eski bir sorudur. Sayfadan başka bir yere gitmezseniz ve ardından dosyayı ikinci kez seçerseniz, tıkladığınızda veya dokunarak başlattığınızda değeri temizlemeniz gerekir (mobil için). Aşağıdakiler, sayfadan uzaklaştığınızda ve jquery kullandığınızda bile çalışacaktır:

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

Dosya başarıyla yüklendikten sonra yapmak istediğinizi yapın. Dosya işlemeniz tamamlandıktan hemen sonra dosya kontrolünün değerini boş dizeye ayarlayın. Böylece .change (), dosya adı değişse de değişse de her zaman çağrılacaktır. Mesela bu şeyi yapabilirsin ve benim için cazibe gibi çalıştı

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

Vue kullanıcıları için çözüm, aynı dosyayı birden çok kez yüklediğinizde sorunu çözüyor ve @change olayı tetiklemiyor:

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

es6 kullanarak vanilya js

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