Comment déclencher un événement lors de la sélection d'un fichier ?

Question

J'ai un formulaire 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 onClick événement. Je veux supprimer le bouton de téléchargement et dès que le fichier est sélectionné dans l'entrée, je veux déclencher l'événement. Comment faire ?

Answer 1

Utiliser l'événement de changement sur l'entrée du fichier.

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

Answer 2

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

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

et ensuite :

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

Answer 3

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 de la réponse acceptée. Si vous ne naviguez pas hors de la page et que vous sélectionnez le fichier une seconde fois, vous devez effacer la valeur lorsque vous cliquez ou faites un touchstart (pour mobile). La méthode ci-dessous fonctionnera même si vous quittez la page et utilise 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
});

Answer 4

Vous pourriez ajouter un gestionnaire d'événement javascript pour l'événement onchange et déclencher le téléchargement à partir de celui-ci :

<input type="file" name="file" onchange="uploadFile()" />

function uploadFile() {
return disableForm(this),ajaxUpload(this.form,'wizecho_upload.php', '&lt;br&gt;Uploading image please wait.....&lt;br&gt;'); return false;
}

Answer 5

Faites ce que vous voulez après que le fichier ait été chargé avec succès. Juste après la fin du traitement du fichier, mettez la valeur du contrôle du fichier à une chaîne vide. Ainsi, le .change() sera toujours appelé même si le nom du fichier change ou non.

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