Déclenchement d'entrée de fichier IE9 à l'aide de Javascript

J'ai eu un message ici:

.change agissant de façon étrange dans IE9

Cependant, j'ai rencontré un nouvel incident concernant la gestion des formulaires de téléchargement de fichiers et j'ai été curieux de savoir si quelqu'un a rencontré ce problème.

Mon problème original était que je ne pouvais pas obtenir un événement onchange pour travailler et je pensais que c'était un problème avec mon javascript, mais j'ai constaté qu'il s'agissait de la manière dont le formulaire est activé.

J'ai une entrée de fichier

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

Maintenant j'ai fait 2 choses.

J'ai caché l'entrée et créé un bouton (pour un meilleur contrôle de style) qui active l'entrée.

 <button id="mybutton">click to upload a pic</button> <input type="file" name="abc"/> 

Et ensuite le JS pour l'interaction entre les deux:

 $("#mybutton").click(function() { $("Input[type=file]").click() }; 

Et bien sûr un soumission pour le formulaire (j'utilise le parent dans cet exemple, mais vous dans mon code actuel, j'utilise l'identifiant du formulaire).

 $("input[type=file]").change(function() { $(this).parent().submit(); }); 

Lorsque je clique sur "mybutton", le résultat attendu se produit, la fenêtre de navigation s'ouvre et me permet de choisir un fichier à partir de mon ordinateur. De même, lorsque je change le fichier dans tous les navigateurs autres que IE, l'événement onchange est déclenché. Maintenant, si je détaille le formulaire et que je clique manuellement sur le bouton "Parcourir" et que je choisis un fichier, l'événement onchange est déclenché. Donc, fondamentalement, le navigateur tente de cliquer sur le bouton du fichier réel différemment de faire un $ ("input [type = file]"). Cliquez ()

Quelqu'un sait comment réparer ceci?

Comme indiqué précédemment, IE est très strict lors du dépôt de formulaire contenant des entrées de fichiers. Les entrées de fichier doivent être déclenchées avec un vrai clic de souris pour permettre la soumission du formulaire. En outre, il semble y avoir un bug avec IE9 et les entrées de fichiers.

La bonne nouvelle est qu'il existe un moyen de contourner la restriction de sécurité d'IE en utilisant une étiquette:

  1. Créez une étiquette d'étiquette régulière liée à l'entrée de votre fichier. L'étiquette déclenche le fichier d'entrée comme il le fait habituellement.
  2. Déguisiez l'étiquette en tant que bouton en utilisant CSS.
  3. L'entrée du fichier doit être affichée (pour IE8), mais peut être cachée en utilisant "visibilité: cachée". IE8 acceptera ce hack.

Si je ne me trompe pas, vous ne pouvez pas modifier cela car il était (était initialement) destiné à protéger la vie privée des utilisateurs évitant de transférer des fichiers sans autorisation / action explicite des utilisateurs.

  1. Assurez-vous que votre code est en $("document").ready(function(){... here..});

  2. Semble être une entrée de fichier lorsqu'il est connecté avec .live("change", function(){}); Ne fonctionne pas bien

L'autre élément de style est autre chose mais le CSS n'est pas si compliqué: un beau chargement de fichiers