jak uruchomić zdarzenie przy wyborze pliku

Mam formularz jak

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

Służy do przesłania obrazu.

Tutaj muszę kliknąć przycisk, aby przesłać obraz i użyć onClickzdarzenia. Chcę usunąć przycisk przesyłania i jak tylko plik zostanie wybrany na wejściu, chcę uruchomić zdarzenie. Jak mogę to zrobić??

Użyj zdarzenia change w pliku wejściowym.

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

Możesz zapisać się na wydarzenie onchange w polu wejściowym:

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

i wtedy:

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

To jest starsze pytanie, które wymaga nowszej odpowiedzi, która rozwiąże problem @Christophera Thomasa powyżej w komentarzach dotyczących akceptacji odpowiedzi. Jeśli nie opuścisz strony, a następnie wybierzesz plik po raz drugi, musisz wyczyścić wartość po kliknięciu lub wykonaniu touchstartu (na urządzeniach mobilnych). Poniższe będzie działać nawet wtedy, gdy opuścisz stronę i użyjesz 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
});

Zrób wszystko, co chcesz zrobić po pomyślnym załadowaniu pliku. Zaraz po zakończeniu przetwarzania pliku ustaw wartość kontroli pliku na pusty ciąg. Więc .change () zawsze będzie nazywane, nawet jeśli nazwa pliku ulegnie zmianie lub nie. jak na przykład możesz to zrobić i działał dla mnie jak urok

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

Rozwiązanie dla użytkowników vue, rozwiązanie problemu, gdy wielokrotnie przesyłasz ten sam plik i nie uruchamia się zdarzenie @change:

 <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 przy użyciu es6

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