Question

在Web应用程序中，我使用文件上载ajax的方式。我将一个较旧的xhr代码段与“新” ajax语法结合在一起，如下所示：

    var ajaxSave = $.ajax({
        url: "http://mydomain.dev/controller/save_frm3",
        type: "POST",
        data: fd, // The FormData
        dataType: "json",
        contentType: false,
        cache: false,
        processData: false,
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            $(".progress").show(); // Show div with upload progress info
            xhr.upload.addEventListener("progress", function(evt)
            {
                if (evt.lengthComputable)
                {
                    var percentComplete = (evt.loaded / evt.total) * 100;
                    $("#progress-bar").width(percentComplete + '%');
                    $("#progress-val").text(percentComplete);
                }
            }, false);
            return xhr;
        }
    });

    ajaxSave.done(function(response)
    {
        if(response.status == "success")
        {
            console.log("Success response from save - "+JSON.stringify(response.resulttext));
            // Update the form info
            var fileName = response.resulttext.present_pdf_name;
            var fileSize = response.resulttext.present_pdf_size;
        } 
    });

    ajaxSave.fail(function(jqXHR, textStatus, errorThrown) 
    {
        alert(textStatus.charAt(0).toUpperCase() + textStatus.slice(1) + ": " + JSON.stringify(errorThrown));
    });

    ajaxSave.always(function(e)
    {
        // Hide progress div after a while
        $(".progress").delay("3000").fadeOut("slow");
    });

但是我注意到，即使文件没有上传（在ajaxSave.fail（）中），进度条也会移动到100％。必须有更好的方法来处理xhr，我已经看过带有.progress（），...

的示例

有人使用过类似的脚本或最佳实践技巧吗？我不是JS延迟对象和Promise方面的专家，因此欢迎您对此问题提出任何明确的建议！

非常感谢！

库尔特

如何使用jQuery ajax（）（v。1.8）以正确的方式上传带有进度条的文件

0 个答案: