Les fichiers d'entrée de changement événement se déclenche qu'une seule fois

J'ai fait un petit script à l'aide de certains des fichiers HTML5 fonctionnalités, qui vous permet de sélectionner un ou plusieurs fichiers, et à chaque fois qu'il va écrire le nom de fichier(s). Tout fonctionne comme il se doit, seulement de l'événement afin de détecter la variation de la valeur des fichiers d'entrée du feu qu'une seule fois, alors comment puis-je faire feu de tout changement, et pas seulement sur le premier changement?

Par ailleurs, voici ce que j'ai fait:
http://tamir.netspot.co.il/html5/files/

InformationsquelleAutor Cokegod | 2011-08-24
  1. 9

    Il semble que la change écouteur d'événement est supprimé parce que vous êtes à l'aide de innerHTML de mettre à jour le même élément (wrapper) que l'entrée lui-même est à l'intérieur. Si le contenu de la wrapper de l'élément, y compris le fichier d'entrée est en cours de re-rendus, et le long de la voie, l'écouteur d'événement est supprimé (ou, plutôt, il est relié à un élément qui n'est plus là).

    Voici un simple jsfiddle qui fait exactement la même chose que votre code, à l'exception qu'elle imprime les noms des fichiers sélectionnés dans un élément différent de l'élément que l'entrée est au. Et ça marche (dans WebKit, de toute façon)

    Voici encore la preuve (En gros, j'ai copié ton code, et seulement ajouté une ligne à ré-enregistrer l'écouteur d'événement après la modification de wrapper.innerHTML)

    Donc, le change événement ne feu pour chaque changement, mais l'entrée qui est observé est éliminé par l'utilisation de innerHTML sur l'entrée de l'élément parent.

    Honnêtement, je ne sais pas si c'est légitime navigateur bug ou pas. Il fait sens pour innerHTML à "écraser" les élément d'entrée, mais le navigateur est assez intelligent pour ne pas réinitialiser l'entrée de la valeur, vous pensez que les auditeurs de bâton autour de trop... alors... eh bien, c'est déroutant

    • Si c'est légitime navigateur bug ou pas, je vous remercie pour trouver d'où mon problème vient de la.
    InformationsquelleAutor Flambino
  2. 29

    Si vous voulez télécharger deux fois, effacer le fichier d'entrée valeur

    $('input[type="file"]').val(null);

    jsfiddle test

    • Fonctionne comme un charme.
    • yup j'utilise : onchange .... $e.cible).val(null);
    • comment obtenir le même comportement sans l'aide de jquery?
    • e.cible.value = "
    InformationsquelleAutor fundon
  3. 4

    Je ne suis pas sûr pourquoi, mais aucune des réponses à cette vieille question sont toutes simples. Voici la façon de le faire facilement aujourd'hui...

    avec jquery...

    HTML:

    $('#myfileinputfieldid')[0].onchange = function(e) {
 //do something with e.  Like write an image to a canvas or make a yummy cup of coffee
  e.target.value = '';
};

    c'est une fois que vous avez modifié la valeur de quelque chose d'autre que le fichier a été sélectionné, la prochaine fois que le fichier d'entrée est cliqué sur le onchange
    événement se déclenche.

    • juste pour plus de clarté. e.cible.value = " e.cible.valeur = null, etc...
    • J'ai eu la même chose sur Chrome 66
    • Le e.target.value = ''; résolu pour moi
    InformationsquelleAutor edgarhsanchez
  4. 1

    Au lieu d'utiliser onchange utilisation oninput événement

     $scope.ShowIcon = function (input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#iAIcon')
                    .attr('src', e.target.result)
            };
            reader.readAsDataURL(input.files[0]);           
        }        
    }
    InformationsquelleAutor user3082420
  5. 0

    Aucun des ci-dessus a travaillé pour moi, j'ai effectivement eu à créer un nouveau "factice" fichier champ de saisie à chaque fois qu'il a été changé - ce qui me permet de capturer l'événement change de nouveau.

    Le processus a été pour moi:

    OnChange
    - déplacer le fichier d'entrée à un autre élément
    - créer un nouveau fichier d'entrée pour capturer l'événement change de nouveau

    InformationsquelleAutor Phil LaNasa
  6. 0

    addEventListener l'habitude de travailler pour IE8(Pas sûr à ce sujet à partir de IE9). Nous avons besoin d'utiliser attachEvent listiner. Si vous avez besoin de la croix-prise en charge du navigateur puis utiliser cette

    if (!inputfile.addEventListener) {
    inputfile.attachEvent("onclick", setCheckedValues); //IE8
}else {
    inputfile.addEventListener("click", setCheckedValues, false); //Other browser
}
    InformationsquelleAutor Chetan Nellekeri
  7. 0

    ok eh bien, selon @Flambino l'entrée est en cours de re-rendus. Pour quelque raison que ce peut être, pour moi sa pertinence.
    L' $.on('change', callback) fonctionnalité est perdue.

    Essayez d'utiliser .fonction de délégué qui, je l'adore!
    http://api.jquery.com/delegate/

    Ok, donc délégué est exactement le même, il dit juste jquery si il y a un élément d'affichage à l'écran avec un particulier de la poignée, joindre une fonctionnalité à elle.

    Donc, même si l'élément est un nouveau rendu, il continuera à fonctionner.

    $(document).delegate('.file_upload_btn', 'change', function(){});

    Vous pouvez penser que c'est jeter de la fonction & dire quel est la différence, mais cela m'a sauvé beaucoup de temps sur des projets.

    InformationsquelleAutor A H Bensiali
  8. 0

    J'ai eu l' .changement de rappel à feu sur chaque nouveau fichier par la réaffectation des de la .changement de fonction à la fin de son propre rappel:

    $('#myfileinputfieldid').change(function (event) {
    scope.processFile(event.target.files[0]);
});

scope.processFile = function(fileStruct) {
    doStuff;

    //Reassign the onchange callback.
    $('#myfileinputfieldid').change(function (event) {
        scope.processFile(event.target.files[0]);
    });
};
    InformationsquelleAutor Kevin J
  9. 0

    Dans mon cas, j'utilise ajax pour télécharger le fichier.
    Je viens d'effacer la valeur de l'entrée avec le gestionnaire d'événement onclick.

      $('#myFile').click(function(e) {e.target.value = '';});
  $('#myFile').change(function(e) { 
           var file = e.target.value;
           var formdata = new FormData();
           formdata.append('file', file, 'somefile');
           $.ajax({
             type: 'POST',
             url: './uploadFile',
             data: formdata,
             processData: false,
             contentType: false,
             success: function(data){

             }
        });
  });
    InformationsquelleAutor Андрей Палкин