mutiple file upload progressbars with javascript -

i want upload multiple files , want show progress.i trying following code. here html code...

<div id='albumbox'>     <input type='file' multiple name='newsfeedalbum[]' id='newsfeedalbum' onchange='uploadnewsfeedimages()' /> <div> <div id='uploadingimages'> </div> <div>     <preogress id='progressbar'> </progress> </div> <div>     <input type='button' id='albumbutton' value='post' disabled /> </div> 

here javascript code...

function uploadnewsfeedimages() {     alert(document.getelementbyid("newsfeedalbum").files.length);     var files = document.getelementbyid("newsfeedalbum").files;     for(var = 0;i < files.length;i++)     {         var file = files[i];         //alert("file name "+files.item(i).name);         var formdata = new formdata();         formdata.append("image",file);         var xhr = new xmlhttprequest();         xhr.open("post","add_newsfeed.php",true);         alert(i);         xhr.upload.onprogress = function()         {             alert("bujji" + i);         }         xhr.send(formdata);     } } function showuploadprogress(event) {     var uploaded = event.loaded/event.total;     uploaded = math.floor(uploaded*100);     document.getelementbyid("progressbar").value = uploaded; } 

but when trying upload 2 images , alerting on upload.progress event alerting bujji2 , bujji2 instead of bujji0 , bujji1.how handle individual upload.progress events....

it's scope issue. loop have completed time onprogress events trigger, 'i' 2 every time onprogress triggers because 'for-loop' has finished running.

you can wrap onprogress function in closure desired effect.

xhr.upload.onprogress = (function() {     return function() {         alert('bujji' + i);     }; }());