comment déclencher un événement sur le fichier sélectionnez

J'ai une forme comme

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

Il s'agit de télécharger une image.

Ici, je dois cliquer sur le bouton pour télécharger l'image et je dois utiliser l' onClickévénement. Je souhaite supprimer le bouton de téléchargement et dès que le fichier est sélectionné à l'entrée, je souhaite déclencher l'événement. Comment je fais ça??

Utilisez l'événement de modification sur l'entrée de fichier.

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

Vous pouvez vous abonner à l'événement onchange dans le champ de saisie:

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

puis:

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

Il s'agit d'une question plus ancienne qui nécessite une réponse plus récente qui répondra à la préoccupation de @Christopher Thomas ci-dessus dans les commentaires d'acceptation de la réponse. Si vous ne quittez pas la page et que vous sélectionnez le fichier une deuxième fois, vous devez effacer la valeur lorsque vous cliquez ou effectuez un démarrage tactile (pour mobile). Ce qui suit fonctionnera même lorsque vous quittez la page et utilisez 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
});

Faites ce que vous voulez faire après le chargement du fichier avec succès. Juste après la fin du traitement de votre fichier, définissez la valeur du contrôle de fichier sur une chaîne vide. Ainsi, le .change () sera toujours appelé même si le nom du fichier change ou non. comme par exemple tu peux faire cette chose et a travaillé pour moi comme un charme

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

Solution pour les utilisateurs de vue, résolution du problème lorsque vous téléchargez le même fichier plusieurs fois et que l'événement @change ne se déclenche pas:

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