带有进度条的 Ajax 请求答案

【问题标题】：Ajax request with progress bar带有进度条的 Ajax 请求
【发布时间】：2020-04-20 08:10:14
【问题描述】：

我有一个将图像上传到 Imgur API 的 Ajax 请求，我需要在上传时向用户显示一个进度条，我按照此 thread 中提供的说明进行操作，但它只显示 1 并且没有在那之后就不工作了。这是我目前正在使用的代码

var settings = {
                    "xhr": function(){
                        var xhr = new window.XMLHttpRequest();
                        //Upload progress
                        xhr.upload.addEventListener("progress", function(evt){
                            if (evt.lengthComputable) {
                                var percentComplete = evt.loaded / evt.total;
                                ("#progressbar").html"percentComplete)
                                ("#progressbar").css("width",precentComplete)
                                //Do something with upload progress
                                console.log(percentComplete);
                            }
                        }, false);
                        //Download progress
                        xhr.addEventListener("progress", function(evt){
                            if (evt.lengthComputable) {
                                var percentComplete = evt.loaded / evt.total;

                                //Do something with download progress
                                console.log(percentComplete);
                            }
                        }, false);
                        return xhr;
                    },
                    "async": true,
                    "crossDomain": true,
                    "url": "https://api.imgur.com/3/upload",
                    "method": "POST",
                    "headers": {
                        "Authorization": "Client-ID <client-id>",
                        "cache-control": "no-cache",
                    },
                    "processData": false,
                    "contentType": false,
                    "mimeType": "multipart/form-data",
                    "data": form
                }

                $.ajax(settings).done(function (response) {
                    console.log(response);
                    let json = JSON.parse(response)
                    $("#prd-url").val(json.data.link)
                    $("#prd-image").html("Change Image");
                    $("#submit-prd-btn").attr("disabled",false);

                });

#button {
  width: 100%;
  background-color: #ddd;
}

#progressbar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}

<div id="button">
  <div id="progressbar"></div>
</div>

在文件上传之前有什么方法可以显示进度条，我需要一个基于百分比的进度条。允许上传的最大图像大小为 2mb，我尝试上传 1.8mb 和 200kb 的图像，在发送 Ajax 调用后立即发送 1，但在 2 秒延迟后发送了 Ajax 调用的响应

【问题讨论】：

你的ajax代码和html进度条没有联系。你也可以发布html代码吗？

标签： javascript jquery html ajax

【解决方案1】：

添加类似的内容：

$('#progressbar').css('width', (percentComplete * 100) + '%');

它会更新进度条的宽度。

【讨论】：

【解决方案2】：

像这样更新xhr函数

xhr: function() {
    var xhr = new window.XMLHttpRequest();
    var progressBar = $("#progressbar");
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt) {
        if (evt.lengthComputable) {
            var percentComplete = (evt.loaded/evt.total)*100;
            percentComplete = Math.floor(percentComplete);
            console.log(percentComplete);
            progressBar.css("width", percentComplete + "%");
            progressBar.html(percentComplete+'%');
        }
    }, false);
return xhr;
},

下载也一样。

【讨论】：

乐于助人！！