如何实现一个进度条，显示我用xhr函数上传％

Posted 2021-05-06

let formData2 = new FormData();
                    formData2.append('_token', vm.response._token);
                    formData2.append('file', vm.response.content[i].path);
                    formData2.append('type', vm.response.content[i].type);
                    $.ajax({
                        async: false,
                        url: "page/file/create/upload/"+vm.response.topic_id,
                        type: "POST",
                        data: formData2,
                        cache: false,
                        dataType: 'json', // what to expect back from the php script
                        contentType: false,
                        processData: false,

                        xhr: function() {
                            var xhr = new XMLHttpRequest();
                            console.log(xhr);
                            xhr.open('POST', this.url, false);
                            if (xhr.open) {
                                console.log("xhr port open");
                            }
                            if (xhr.upload) {
                                xhr.upload.addEventListener('progress', this.onProgress);
                                console.log("xhr.upload");
                            }
                            return xhr;
                          //  console.log(xhr);
                        },

                        success: function (title) {
                            console.log(" file upload in controller recieves: "+title);
                        },

                    })
                }

point：1>这是一个用vue页面中的“methods”编写的函数（laravel v5.5 + vue 1.0的文件上传练习项目）

点：2>从我的控制器文件顺利上传，没有问题。

point：3>现在我想实现一个进度条，显示上传％

尝试过xhr：function但不知道要上传％...

答案

现在我的xhr函数看起来像这样..如果我得到百分比的值。我将使用我的进度条值绑定它。但我无法上传％

xhr: function() {
                                var xhr = jQuery.ajaxSettings.xhr();
                                console.log(xhr);
                                xhr.open('POST', this.url, false);
                                if (xhr.open) {
                                    console.log("xhr port open");
                                }
                                if (xhr.upload) {
                                    var percentage = 0;
                                    xhr.upload.addEventListener('progress', function(e) {
                                        if(e.lengthComputable) {
                                            percentage = e.loaded/e.total;
                                            percentage = parseInt(percentage * 100);
                                            // Do what ever you want after here
                                            console.log("percentage:"+percentage);
                                        }
                                    }, false);
                                }
                                return xhr;
                              //  console.log(xhr);
                            },

另一答案

您可以尝试下面的代码，它适用于我：

xhr : function() {
    var xhr = jQuery.ajaxSettings.xhr();
    if(xhr.upload) {
        if(xhr instanceof window.XMLHttpRequest) {
            var percentage = 0;
            xhr.upload.addEventListener('progress', function(e) {
                if(e.lengthComputable) {
                    percentage = e.loaded/e.total;
                    percentage = parseInt(percentage * 100);
                    // Do what ever you want after here
                }
            }, false);
        }
    }
    return xhr;
}

基本上，我使用xhr = jQuery.ajaxSettings.xhr()和xhr.upload.addEventListener进度来计算其进度百分比。

希望这有效。

另一答案

最后它对我有用。开心的我 ：）

xhr: function () {
                                var xhr = new window.XMLHttpRequest();
                                xhr.upload.addEventListener("progress", function (evt) {
                                    if (evt.lengthComputable) {
                                        var percentComplete = evt.loaded / evt.total;
                                        percentComplete = parseInt(percentComplete * 100);
                                        console.log("% :" + percentComplete );
                                        $('.myprogress').text(percentComplete + '%');
                                        $('.myprogress').css('width', percentComplete + '%');
                                    }
                                }, false);
                                return xhr;
                            },