HTML5，jQuery，相同上传文件大小的进度条

Question

如何为同一个文件加载进度条？

例如，我有两个或更多文件，我想要每个文件大小的进度条。

现在我只有几个进度条，这些显示我加载大多数大文件的进度。 我可以为每个文件大小设置进度条吗？

抱歉我的英语不好。

    function upl(){
 data = new FormData($('#form')[0]);
     $.ajax({
           type: 'POST',
           url: 'ch.php',
           data: data,
           cache: false,
           contentType: false,
           processData: false,
           success: function(data){
       console.log(data);
   },
    xhr: function() {
               var myXhr = $.ajaxSettings.xhr();
               if(myXhr.upload){
                   myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
               }
               return myXhr;
           },
       });


     function progressHandlingFunction(e){

       if(e.lengthComputable){


$('progress').attr({value:e.loaded,max:e.total});


       }
   }

}




$(function() {
   $('#form').submit(function(e) {
    e.preventDefault();
    upl();
   });



   $('#add').click(function(){
    var id=$("input[type='file']").length;
    $('<span id="f"><br /><progress id="pr_'+id+'" class="pBar" min="0" max="100" value="0">0% complete</progress><br /><input type="file" name="img_'+id+'"/><input type="button" id="del" value="remove"/></span>').insertBefore('#add');
     $("#f>input[type='button']").click(function(){
     $("#f").remove();
     return false;
    });
   });