come attivare l'evento sulla selezione del file

Ho un modulo come

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

È caricare un'immagine.

Qui devo fare clic sul pulsante per caricare l'immagine e devo usare l' onClickevento. Voglio rimuovere il pulsante di caricamento e non appena il file è selezionato all'ingresso, voglio attivare l'evento. Come lo faccio??

Utilizza l'evento change sull'input del file.

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

Puoi iscriverti all'evento onchange nel campo di input:

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

e poi:

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

Questa è una vecchia domanda che necessita di una nuova risposta che affronterà la preoccupazione di @Christopher Thomas sopra nei commenti della risposta di accettazione. Se non esci dalla pagina e quindi selezioni il file una seconda volta, devi cancellare il valore quando fai clic o esegui un touchstart (per dispositivi mobili). Quanto segue funzionerà anche quando esci dalla pagina e utilizzi 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
});

Fai quello che vuoi fare dopo che il file è stato caricato con successo. Appena dopo il completamento dell'elaborazione del file, imposta il valore del controllo del file su una stringa vuota. Così il .change () verrà sempre chiamato anche se il nome del file cambia o meno. come per esempio puoi fare questa cosa e ha funzionato per me come un fascino

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

Soluzione per gli utenti vue, risolvendo il problema quando si carica lo stesso file più volte e l'evento @change non si attiva:

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