多个文件上传，每个文件都有进度条拖放

Question

所以我实现了一个非常好用的dreg和drop upload功能。我已经实现了一个进度条来显示文件的上传进度。我的问题是我想为每个上传的文件显示进度条。但是没有办法更新每个文件的进度。

我的前端。

<div id="drop_zone">Drop files here</div>
 <progress></progress>

的Javascript

function handleDragOver(event) {
           event.stopPropagation();
           event.preventDefault();
           var dropZone = document.getElementById('drop_zone');
           dropZone.innerHTML = "Drop now";
 }

   function handleDnDFileSelect(event) {
           event.stopPropagation();
           event.preventDefault();

           /* Read the list of all the selected files. */
           files = event.dataTransfer.files;

           /* Consolidate the output element. */
           var form = document.getElementById('form1');
           var nm2="";
           var data = new FormData(form);
           for (var i = 0; i < files.length; i++) {



               data.append(files[i].name, files[i]);

           }
           $.ajax({
               type: "POST",
               url: "/WebServices/uploadservice.asmx/uploadfile",
               xhr: function () {  // Custom XMLHttpRequest
                   var myXhr = $.ajaxSettings.xhr();
                   if (myXhr.upload) { // Check if upload property exists

                       myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // For handling the progress of the upload
                   }
                   return myXhr;
               },
               data: data,
               cache: false,
               contentType: false,
               processData: false,
               success: function (res) {
                   //  $("#uploadedfiles").append(res);

               },
               error: function (err) {
               }
           });

       function progressHandlingFunction(e){
           if (e.lengthComputable) {


               $('progress').attr({ value: e.loaded, max: e.total });
               count++;
           }
       }
       }
           if (window.File && window.FileList && window.FileReader) {

        var dropZone = document.getElementById('drop_zone');
        dropZone.addEventListener('dragover', handleDragOver, false);
        dropZone.addEventListener('drop', handleDnDFileSelect, false);

    }
    else {
        alert('Sorry! this browser does not support HTML5 File APIs.');
    }

保存文件的网络服务

    public string uploadfile()
    {
        string savedfile = "";
        try
        {
            HttpFileCollection fileCollection = HttpContext.Current.Request.Files;

            for (int i = 0; i < fileCollection.Count; i++)
            {
                try
                {
                    HttpPostedFile upload = fileCollection[i];
                    int f = fileCollection[i].ContentLength;
                    string filename = "/ProductImages/" + fileCollection[i].FileName;
                    upload.SaveAs(Server.MapPath(filename));
                    savedfile = fileCollection[i].FileName + "<br/>";
                }
                catch
                {
                }

            }
            return savedfile;
        }
        catch(Exception ex)
        {
            return ex.Message.ToString();
        }

    }

正确显示上传的总进度。我尝试了不同的方法来显示个人文件的进度。例如，在for循环中动态创建进度条，并为每个文件单独调用webservice，而不是为所有文件一起调用，但这不起作用，因为xmlhttprequest总是异步工作。任何解决方案