Javascript 当ajax调用时，上传模式内的进度条不工作

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

<div class="modal-body">

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

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

</div>

0%

这是我的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);
                               }

                        });

                }

$（“html”）。在（“drop”上，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
$（'myModal'）.modal（'show'）；
var dt=e.dataTransfer | |（e.originalEvent&&e.originalEvent.dataTransfer）；
var files=e.target.files | |（dt&&dt.files）；
如果（文件）{
对于（var i=0；ih，进度条是否在模式之外工作？如果要为每个文件添加div进度条，可以执行类似于（i=0；i

div进度条也不在模式外工作。进度条是否在模式外工作？如果要为每个文件添加一个div进度条，可以执行类似于（i=0；idiv进度条也不在模式外工作。