Jquery: change l'événement en fichier d'entrée sur IE

Question

J'ai déjà regardé tout autour, et ne pouvez pas trouver une solution: j'ai un formulaire pour uploader des fichiers, et il faut tirer la soumettre après la sélection du fichier.

Sur FF/Chrome il va bien, et de soumettre le formulaire après la sélection du fichier, mais je ne peux pas le faire sur ie.

Déjà essayé avec la souris/propertychange mais rien ne se passe. Certains code que j'ai déjà essayé:

$("#attach").attr("onChange", "alert('I changed')");

$("#attach").live($.browser.msie? 'propertychange': 'change', function(e) { ... });

Toutes les suggestions de je essayer?

Edit1: je pense qu'il y a une information importante, ce fichier d'entrée, est créé à la volée, à cause de cela que j'utilise .live() pour lier l'événement

Answer 1

Je sais que c'est avec plusieurs mois de retard, mais je viens de tomber sur exactement le même comportement dans IE7; dans tous les autres navigateurs, l'événement de changement de fichier d'entrées qui se passe après la sélection de fichier. Dans IE7, il ne se produit que si vous déclenchez le fichier, sélectionnez nouveau, ou sur le flou.

Voici comment je me suis retrouvé en le fixant:

var $input = $('#your-file-input-element');

var someFunction = function()
{
    // what you actually want to do
};

if ($.browser.msie)
{
    // IE suspends timeouts until after the file dialog closes
    $input.click(function(event)
    {
        setTimeout(function()
        {
            if($input.val().length > 0) {
              someFunction();
            }
        }, 0);
    });
}
else
{
    // All other browsers behave
    $input.change(someFunction);
}

Techniquement, vous pourrait/devrait filtre le hack condition à juste IE7, depuis IE8 se comporte correctement sur l'événement de changement, mais il a aussi le même comportement que IE7 sur la suspension de délais d'expiration de tout navigateur chrome est visible (je suppose qu'il estime blocage I/O), de sorte qu'il fonctionne comme-est.

Answer 2

C'est vraiment la fin, mais j'ai eu le même problème, et je l'ai résolu en utilisant un style <label> de la balise avec une légère solution de contournement pour Firefox.

http://jsfiddle.net/djibouti33/uP7A9/

Les Objectifs:

1. permettre à l'utilisateur de télécharger un fichier en utilisant la norme html fichier de contrôle d'entrée
2. cacher un fichier html standard de contrôle d'entrée et s'appliquent propre style
3. après que l'utilisateur sélectionne le fichier à télécharger, envoyer automatiquement le formulaire

Les Navigateurs:

• Firefox, Chrome, IE8/9, Safari
• IE7 ne fonctionne pas, mais il pourrait, si vous ajoutez que le navigateur de la solution détaillée en bas

La Solution Initiale:

1. Masquer le fichier d'entrée en la positionnant à l'écran. Important de ne pas display:none que certains navigateurs n'aime pas ça.
2. Ajouter un autre élément de style à la page (lien, bouton).
3. Écouter un clic sur cet élément, puis programmer l'envoi d'un clic pour le fichier d'entrée pour déclencher la native "de l'explorateur de fichiers'
4. Pour écouter le fichier d'entrée de l'événement onchange (se produit lorsqu'un utilisateur choisit de leur fichier)
5. Soumettre le formulaire

Le Problème:

1. C'est à dire: si vous programmer l'envoi d'un clic sur un fichier d'entrée pour l'activer (2), par programme de la soumission du formulaire (5) lèvera une erreur de sécurité

La Solution De Rechange:

1. Même que ci-dessus
2. Tirer parti des fonctionnalités d'accessibilité intégrées dans la balise (en cliquant sur une étiquette d'activer la commande associée) par style une balise au lieu d'un lien/bouton
3. Pour écouter le fichier d'entrée de l'événement onchange
4. Soumettre le formulaire
5. Pour une raison quelconque Mozilla navigateurs ne pas activer une entrée de fichier en cliquant sur elle .
6. Pour Mozilla, écouter le clic sur l'étiquette et envoyer un événement de clic sur le fichier d'entrée pour l'activer.

Espérons que cette aide! Découvrez le jsfiddle pour plus de détails sur le html/js/css utilisé pour faire fonctionner le tout.

Answer 3

Le formater comme ceci:

 $("#attach").change(function() { 
  alert('I Changed');
});
 

Mise à jour: après avoir répondu à une autre question à ce sujet plus tôt, nous avons réalisé que cela avait été corrigé dans le cadre de la réécriture de l'événement jQuery 1.4.2 . Il suffit de mettre à jour la dernière version pour résoudre le problème d'événement change avec <input type="file" /> dans IE.

Answer 4

J'ai utilisé la solution suivante. J'ai essayé de le rendre aussi autonome que possible.

 (function($) {
    if ($.browser.msie == false)
        return;

    $('input[type=file]').live('click', function(e) {
        var self = this;
        var blur = function() {
            $(self).blur();
        }
        setTimeout(blur, 0);
    });

})(jQuery);
 

Answer 5

Cela a toujours fonctionné pour moi dans IE6 et IE7.

 $('#id-of-input-type-file').change(function(){});