php - How to select prepended element -
i have upload form uses new multiple attribute , made ajax upload form make things more user friendly. problem im trying update percentages of these files being uploaded , appended div, instead of 1 percentage being updated of them updated last file. here code.
$('#file').change(function(event) { for(i = 0; < 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'); } }); now can see in progress listener
var progress = $('#uploadcontent').find('.uploadpercent'); how select file supposed updated correctly. if can find comepletely different method change percent great too! - thanks!
when you're prepending, add new, specific class (yes, use id, i'd stick class) .uploadpercent element:
$('#uploadcontent').prepend('<div class="uploadlabel" style="width:60%;">'+name+'</div><div class="uploadlabel uploadpercent uploadtarget' + + '" style="width:10%;">0%</div><div class="uploadlabel" style="width:15%;">n/a</div><div class="uploadlabel" style="width:15%;">'+type+'</div>'); // here----------------------------------------------------------------------------------------------------------------------^ here and when you're targeting, use this:
var progress = $('#uploadcontent').find('.uploadtarget' + i); because need value of i accurate based on in loop, need use closure well. code end looking like:
$('#file').change(function(event) { for(i = 0; < this.files.length; i++) { (function (i) { // current code inside loop })(i); } }); while example above option, makes more sent store reference newly inserted element , not have deal new class , i, , use later.
here final code i'd use:
$("#file").on("change", function (event) { (var = 0; < 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); } });
Comments
Post a Comment