Télécharger des fichiers à l'aide du type de saisie = champ «fichier» avec l'événement .change () ne déclenchant pas toujours dans IE et Chrome

J'ai un code simple pour télécharger des fichiers:

$(document).ready(function () { $(".attachmentsUpload input.file").change(function () { $('form').submit(); }); }); <form class="attachmentsUpload" action="/UploadHandler.ashx" method="post" enctype="multipart/form-data"> <input type="file" class="file" name="file" /> </form> 

Alors que je clique sur la saisie, puis sélectionnez un fichier dans la boîte de dialogue, je soumets ce fichier à l'aide d'ajax. Ce n'est pas une partie importante ici. Une partie importante est que, tout en sélectionnant le même fichier deux fois dans la boîte de dialogue, juste après avoir soumis le premier fichier, l'événement .change () ne déclenche pas dans IE et Chrome. Mais alors que je choisis un fichier différent, l'événement se déclenche et fonctionne correctement. Sous Firefox, il lance tout le temps.

Comment contourner cela, pour fonctionner comme prévu (comme dans Firefox)?

La description

Cela se produit car la valeur du champ de saisie (le chemin de fichier sélectionné) ne change pas si vous sélectionnez à nouveau le même fichier.

Vous pouvez définir la valeur dans l'événement onChange() sur une chaîne vide et soumettre votre formulaire uniquement si la valeur n'est pas vide. Regardez mon exemple et cette démonstration jsFiddle .

Échantillon

 $(".attachmentsUpload input.file").change(function () { if ($(".attachmentsUpload input.file").val() == "") { return; } // your ajax submit $(".attachmentsUpload input.file").val(""); }); 

Mettre à jour

Ceci, pour une raison quelconque, ne fonctionne pas dans IE9. Vous pouvez remplacer l'élément pour les réinitialiser. Dans ce cas, vous avez besoin de jQuery live() pour lier l'événement, car votre champ de saisie sera (ré) créé dynamiquement. Cela fonctionnera dans tous les navigateurs.

J'ai trouvé cette solution sur la réponse de stackoverflow Effacer le type d'entrée = 'fichier' en utilisant jQuery

 $(".attachmentsUpload input.file").live("change", function () { if ($(".attachmentsUpload input.file").val() == "") { return; } // get the inputs value var fileInputContent = $(".attachmentsUpload input.file").val(); // your ajax submit alert("submit value of the file input field=" + fileInputContent); // reset the field $(".attachmentsUpload input.file").replaceWith('<input type="file" class="file" name="file" />'); });​ 

Plus d'information

  • JQuery.live ()
  • JQuery.replaceWith ()

Découvrez mon jsFiddle mis à jour

Sur la base de la réponse de dknaack, l'indice est l' utilisation de jquery live pour lier l'événement de modification et la réinitialisation du champ de saisie après la soumission :

 $(document).ready(function () { $(".attachmentsUpload input.file").change(function () { $('form').submit(); /* sync submit */ $(".attachmentsUpload input.file").replaceWith('<input type="file" class="file" name="file" />'); }); }); 

La réinitialisation doit être effectuée après que l' événement de soumission est terminé. Lorsque la soumission est asynchrone , réinitialisez le champ par exemple dans l'événement de succès ajax .

 $(document).ready(function () { $(".attachmentsUpload input.file").change(function () { $('form').submit(); /* async submit */ }); }); .ajaxForm({ ... success: function (result) { // reset the field - needed for IE to upload the same file second time $this.find("input.file").replaceWith('<input type="file" class="file" name="file" />'); } }); 

Assurez-vous que votre script est enveloppé dans un wrapper $(function() {}) .

On dirait qu'il s'exécute avant que le DOM ne soit prêt.