模式中的进度栏​​未更新

Question

我创建了一个PHP上载类，该类将文件作为输入并将其复制到服务器，应用程序的这一端工作正常。我遇到的问题是在引导程序模式下显示进度栏更新。模态显示，并且我可以在Modal中看到进度条，只是进度条没有更新。

我已经完成了JS代码，并通过从模式中取出进度条HTML并将其放置在上传表单页面上来进行了测试，并且工作正常。

我的理论是，模态可能导致JS失去上下文？

$("form").submit(function() {
     //$("#loadingModal").modal("show");

     $form = $(this);

     uploadVideo($form);
});

function uploadVideo($form){
  var formdata = new FormData($form[0]); //formelement

  var ajax= new XMLHttpRequest();

  ajax.upload.addEventListener("progress", function(event){
    var percent = (event.loaded /event.total) * 100;

    $form.find('.progress-bar').width(percent+'%');
    //console.log(percent);
  });

  //progress completed load event

  ajax.addEventListener("load", function(event){
    $form.find('.progress-bar');
  });

  ajax.open("POST", "processing.php");
  ajax.send(formdata);
}

Answer 1

如果有人感兴趣，我最终解决了这个问题，我需要公开Modal属性，因此我添加了此内容：

var $el = $("#loadingModal");

然后，我可以按照以下方式更新代码：

  ajax.upload.addEventListener("progress", function(event){
    var percent = (event.loaded /event.total) * 100;

    $el.find('.progress-bar').width(percent+'%');
    //console.log(percent);
  });

  //progress completed load event

  ajax.addEventListener("load", function(event){
    $el.find('.progress-bar');

  });