当ajax调用时，模态内的上传进度条不起作用

Question

我有拖放上传工作的页面，拖放时打开一个有进度条的模态。拖放功能运行良好。当文件被删除时，模态被打开但进度条似乎根本没有增加。即使在ajax调用成功响应之后，进度条仍然是相同的。

<div class="modal-body">

    <div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>

    <div id="status"></div>

</div>

这是我的Jquery

$("html").on("drop", function(e) {
        e.preventDefault();  
        e.stopPropagation();
        $('#myModal').modal('show');


        var dt = e.dataTransfer || (e.originalEvent && e.originalEvent.dataTransfer);
        var files = e.target.files || (dt && dt.files);
        if (files) {

         for(var i = 0; i<e.originalEvent.dataTransfer.files.length;i++){

           var file_ext = e.originalEvent.dataTransfer.files[i].name.split('.').pop();
                console.log(file_ext);
             if ((file_ext == 'pdf') || (file_ext == 'docx') || (file_ext == 'txt')) {
                 console.log('right file');
                    var resume = e.originalEvent.dataTransfer.files[i];
                    var resume_name = resume.name;
                    console.log(resume_name);
                    var form_data = new FormData();
                    form_data.append("resume",resume);
                        var bar = $('.bar');
                        var percent = $('.percent');
                        var status = $('#status');


                  $.ajax({
                      url : '/resume_upload',
                      type : 'POST',
                      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                      mimeType: "multipart/form-data",
                      data : form_data,
                      beforeSend: function() {
                               $('#myModal').modal('show');
                               status.empty();
                               var percentVal = '0%';
                               bar.width(percentVal);
                               percent.html(percentVal);
                                },
                               uploadProgress: function(event, position, total, percentComplete) {
                               var percentVal = percentComplete + '%';
                               bar.width(percentVal);
                               percent.html(percentVal);
                                },

                               success : function(data) {
                                    $('#myModal').modal('hide');
                                   console.log(data.msg);
                                   //alert(data.msg);
                               },
                               processData : false,
                               contentType : false,
                               error : function(xhr ,status ,error){
                                console.log(xhr);
                                alert(xhr);
                               }

                        });

                }

如何在删除多个文件时创建多个进度div。