时间戳

首页 > 解决方案 > 模态中的进度条不更新

javascript - 模态中的进度条不更新

问题描述

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

我已经完成了 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);
}

标签： javascriptbootstrap-4

解决方案

如果有人感兴趣，我最终解决了这个问题，我需要公开 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');

  });

推荐阅读