Wie wird ein Ereignis in der Dateiauswahl ausgelöst?

Ich habe ein Formular als

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

Es ist ein Bild hochzuladen.

Hier muss ich auf die Schaltfläche klicken, um das Bild hochzuladen und ich muss onClickevent verwenden. Ich möchte die Upload-Schaltfläche entfernen und sobald die Datei am Eingang ausgewählt ist, möchte ich das Ereignis auslösen. Wie mache ich das??

Verwenden Sie das Änderungsereignis für die Dateieingabe.

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

Sie können das Ereignis onchange im Eingabefeld abonnieren:

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

und dann:

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

Dies ist eine ältere Frage, die eine neuere Antwort benötigt, die das Anliegen von @Christopher Thomas oben in den Kommentaren der akzeptierten Antwort anspricht. Wenn Sie nicht von der Seite weg navigieren und die Datei ein zweites Mal auswählen, müssen Sie den Wert löschen, wenn Sie auf klicken oder einen Touchstart ausführen (für Handys). Das Folgende funktioniert auch, wenn Sie von der Seite weg navigieren und jquery verwenden:

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

Tun Sie, was immer Sie tun möchten, nachdem die Datei erfolgreich geladen wurde. Setzen Sie den Wert der Dateisteuerung nach Abschluss Ihrer Dateiverarbeitung auf eine leere Zeichenfolge. Daher wird .change () immer aufgerufen, auch wenn sich der Dateiname ändert oder nicht. wie zum Beispiel kannst du dieses Ding machen und hast für mich wie Charme gearbeitet

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

Lösung für Vue-Benutzer: Das Lösen eines Problems, wenn Sie dieselbe Datei mehrmals hochladen und das @ change-Ereignis nicht ausgelöst wird:

 <input
      ref="fileInput"
      type="file"
      @click="onClick"
    />
  methods: {
    onClick() {
       this.$refs.fileInput.value = ''
       // further logic for file...
    }
  }

<input type = "file" @ change = "onFileChange" class = "Eingabe hochladen-eingeben" ref = "inputFile" />

onFileChange(e) {
//upload file and then delete it from input 
 self.$refs.inputFile.value = ''
}