javascript - Ajax 进度无法正常工作

Question

我这里有一个小问题。我正在通过 AJAX 将一些图像数据上传到我的 PHP 脚本。除了进度部分之外，整个脚本运行良好。

控制台中我得到的唯一信息是

上传1

然后

Ajax 完成

Java 脚本:

$.ajax({
                xhr: function(){
                    var xhr = new window.XMLHttpRequest();
                        //Upload progress
                        xhr.upload.addEventListener("progress", function(evt){
                            if (evt.lengthComputable) {
                                var percentComplete = evt.loaded / evt.total;
                                //Do something with upload progress
                                    console.log("upload"+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("download:"+percentComplete);
                        }
                    }, false);
                    return xhr;
                },
                type: "POST",
                url: url,
                data: {
                    image: img,
                    designID: dID,
                }
            }).done(function( newID ) {
                console.log("ajax done");
            });

我假设上传会从 1 增加到 100%。我尝试做一些循环，但没有成功..知道发生了什么

干杯

Answer 1

在 ajax 请求中添加 async:true。

$.ajax({
                xhr: function(){...},
                type: "POST",
                url: url,
                async: true,
                data: {
                    image: img,
                    designID: dID,
                }
            }).done(function( newID ) {
                console.log("ajax done");
            });