Comment sélectionner un élément ajouté

Question

J'ai un formulaire de téléchargement qui utilise le nouvel attribut multiple et j'ai fait un formulaire de téléchargement ajax pour rendre les choses plus faciles à utiliser. Mon problème est im essayant de mettre à jour des pourcentages pour tous ces fichiers qui sont téléchargés et ajoutés à un div, au lieu d'un pourcentage mis à jour, tous sont mis à jour à partir du dernier fichier. Voici du code.

$('#File').change(function(event) { 
     for(I = 0; I < this.files.length; I++) 
     { 
      var Name = this.files[I].name; 
      var Size = this.files[I].size; 
      var Type = this.files[I].type; 

      $('#UploadContent').prepend('<div class="UploadLabel" style="width:60%;">'+Name+'</div><div class="UploadLabel UploadPercent" style="width:10%;">0%</div><div class="UploadLabel" style="width:15%;">N/A</div><div class="UploadLabel" style="width:15%;">'+Type+'</div>'); 
      var Data = new FormData(); 
      Data.append('File[]', this.files[I]); 
      var Request = new XMLHttpRequest(); 
      Request.upload.addEventListener('progress', function(event){ 
       if(event.lengthComputable) 
       { 
        var Percent = event.loaded/event.total; 
        var Progress = $('#UploadContent').find('.UploadPercent'); 
        $(Progress).text(Math.round(Percent * 100) + '%'); 
       } 
      }); 
      Request.upload.addEventListener('load', function(event) { 
     }); 

      Request.open('POST', '/Home/Upload/Upload.php'); 
      Request.setRequestHeader('Chache-Control', 'no-cache'); 
      Request.send(Data); 
      $('#UploadModal').fadeIn('fast'); 
     } 
    }); 

maintenant que vous pouvez voir dans les progrès d'écoute mon

var progress = $('#UploadContent').find('.UploadPercent'); 

comment je sélectionner le fichier qui est censé être mis à jour correctement. Si quelqu'un peut trouver une méthode complètement différente pour changer le pourcentage ce serait génial aussi! - Merci!

Answer 1

Lorsque vous préfixer, ajoutez un nouveau, spécifique class (oui, vous pouvez utiliser un id, mais je voudrais juste coller à class) à l'élément .UploadPercent:

$('#UploadContent').prepend('<div class="UploadLabel" style="width:60%;">'+Name+'</div><div class="UploadLabel UploadPercent UploadTarget' + I + '" style="width:10%;">0%</div><div class="UploadLabel" style="width:15%;">N/A</div><div class="UploadLabel" style="width:15%;">'+Type+'</div>'); 
// LOOK HERE----------------------------------------------------------------------------------------------------------------------^ HERE 

Et quand vous » re ciblage, utilisez ceci:

var progress = $('#UploadContent').find('.UploadTarget' + I); 

Parce que vous avez besoin de la valeur de I pour être précis en fonction de l'endroit où vous êtes dans la boucle, vous devez utiliser une fermeture aussi bien. Donc, votre code se termine par ressembler à:

$('#File').change(function(event) { 
    for(I = 0; I < this.files.length; I++) { 
     (function (I) { 
      // Your current code inside the for loop 
     })(I); 
    } 
}); 

Bien que l'exemple ci-dessus est certainement une option, il est probablement plus envoyé à stocker juste une référence à l'élément nouvellement inséré et ne pas avoir à faire face à une nouvelle class et I, puis l'utiliser plus tard.

Voici le code final j'utiliser:

http://jsfiddle.net/MeL7L/2/

$("#File").on("change", function (event) { 
    for (var i = 0; i < this.files.length; i++) { 
     (function (curFile, i) { 
      var Name = curFile.files[i].name; 
      var Size = curFile.files[i].size; 
      var Type = curFile.files[i].type; 

      var newEl = ""; 
      newEl += '<div class="UploadLabel" style="width:60%;">' + Name + '</div>'; 
      newEl += '<div class="UploadLabel UploadPercent" style="width:10%;">0%</div>'; 
      newEl += '<div class="UploadLabel" style="width:15%;">N/A</div>'; 
      newEl += '<div class="UploadLabel" style="width:15%;">' + Type + '</div>'; 
      newEl = $(newEl); 
      $("#UploadContent").prepend(newEl); 
      var Data = new FormData(); 
      Data.append("File[]", curFile.files[i]); 
      var Request = new XMLHttpRequest(); 
      Request.upload.addEventListener("progress", function (event){ 
       if (event.lengthComputable) { 
        var Percent = event.loaded/event.total; 
        var Progress = newEl.find(".UploadPercent"); 
        Progress.text(Math.round(Percent * 100) + "%"); 
       } 
      }); 
      Request.upload.addEventListener("load", function(event) {}); 

      Request.open("POST", "/Home/Upload/Upload.php"); 
      Request.setRequestHeader("Cache-Control", "no-cache"); 
      Request.send(Data); 
      $("#UploadModal").fadeIn("fast"); 
     })(this, i); 
    } 
});