ASP.NET Core - 表单提交上的进度条

如何解决ASP.NET Core - 表单提交上的进度条

我有一个带有用于上传文件的表单的简单网页。一切正常，但我需要使用一些叠加进度条。我在刷新进度条本身时遇到问题。我试图使用 this question 中发布的方法。但这对我不起作用，因为我没有使用 ajax 本身。有人能指出我正确的方向吗？

我的提交方法：

$("#uploader-form").on("submit",function (e) {
    e.preventDefault();
    showPopup();

    this.addEventListener("formdata",function (event) {
        var uploader = $("#file-uploader").dxFileUploader('instance');
        event.formData.set("MyFiles",null); // dxFileUploader's "Name" option value
        for (var i = 0; i < uploader._files.length; i++) {
            event.formData.append("File" + i.toString(),uploader._files[i].value);
        }
    });
  
    this.submit();
  
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress",function (evt) {

        if (evt.lengthComputable) {
            refreshProgressBar(evt.total,evt.loaded);
        }
    },false);  
});

显示进度条，文件按预期上传，但进度条永不刷新。

谢谢。

解决方法

XMLHttpRequest 本身就是 ajax。如果您只想使用 XMLHttpRequest 上传文件，这里是示例。

<p>
  select file:
  <input type="file" id="ipt-file" />
  <button type="button" id="btn-upload">upload</button>
</p>
<div class="progress-bar">
  <div class="progress" id="progress"></div>
</div>
<p id="info"></p>
     
@section Scripts{

  <script>
    var button = document.querySelector("#btn-upload"),input = document.querySelector("#ipt-file"),progress = document.querySelector("#progress"),info = document.querySelector("#info");

        var upload = function () {
            if (input.files.length === 0) {
                console.log("No file selected");
                return;
            }

        var formData = new FormData();
        formData.append("file",input.files[0]);

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                info.innerHTML = xhr.responseText;
            }
        };

        xhr.upload.addEventListener("progress",function (event) {
            if (event.lengthComputable) {
                progress.style.width = Math.ceil(event.loaded * 100 / event.total) + "%";
            }
        },false);

        xhr.open("POST","/home/get");
        xhr.send(formData);
    };

    button.addEventListener("click",upload,false);
  </script>
}