cómo disparar evento en la selección de archivo

Tengo una forma como

<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 subir una imagen.

Aquí necesito hacer clic en el botón para cargar la imagen y debo usar onClickevento. Quiero eliminar el botón de carga y tan pronto como se seleccione el archivo en la entrada, quiero activar el evento. ¿¿Cómo puedo hacer eso??

Utilice el evento de cambio en la entrada del archivo.

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

Puede suscribirse al evento onchange en el campo de entrada:

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

y entonces:

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

Esta es una pregunta anterior que necesita una respuesta más nueva que abordará la preocupación de @Christopher Thomas arriba en los comentarios de la respuesta de aceptación. Si no navega fuera de la página y luego selecciona el archivo por segunda vez, debe borrar el valor cuando hace clic o hace un inicio táctil (para dispositivos móviles). Lo siguiente funcionará incluso cuando navegue fuera de la página y use 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
});

Haga lo que quiera hacer después de que el archivo se cargue correctamente. Justo después de completar el procesamiento del archivo, establezca el valor del control del archivo en una cadena en blanco. De modo que el .change () siempre se llamará incluso si el nombre del archivo cambia o no. como, por ejemplo, puedes hacer esto y funcionó para mí como un encanto

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

Solución para los usuarios de vue, que resuelve el problema cuando carga el mismo archivo varias veces y el evento @change no se activa:

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

vainilla js usando es6

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