大文本字段的 jQuery AJAX 上传进度答案

【问题标题】：jQuery AJAX upload progress for large text fields大文本字段的 jQuery AJAX 上传进度
【发布时间】：2013-03-30 09:48:06
【问题描述】：

是否可以使用 jQuery ajax 获取具有非常大文本字段的表单的上传进度？我认为客户端知道已经发送了多少字节，但是当我使用 Google 搜索时，我只能找到使用服务器站点代码上传文件的解决方案。

这是我的 ajax 请求：

$.ajax({
        type: "POST",
        url: "index.php?action=saveNewPost",
        data: {textbox1: textbox1,textbox2: textbox2},
        contentType: "application/x-www-form-urlencoded;charset=UTF-8",
        success: function(){
            //
        }
    });

我希望会有类似“onProgress”的参数，其中包含已发送的字节数...

找到解决方案

$.ajax({
        xhr: function() {
            var req = $.ajaxSettings.xhr();
            if (req) {
                req.upload.addEventListener('progress', function(event) {
                    if (event.lengthComputable) {
                        $('#ajaxFeedbackDiv').html(event.loaded); // = 'test'; //event.loaded + ' / ' + event.total;
                    }
                }, false);
            }
            return req;
        },
        type: "POST",
        url: "index.php?action=saveNewPost",
        data: {textbox1: textbox1,textbox2: textbox2},
        contentType: "application/x-www-form-urlencoded;charset=UTF-8"
        }
    });

这似乎有效，尽管仍有

2 个问题：

我的本地主机上的连接太快了，所以很难看到“进度”实际工作。我在同一网络中的第二台 Mac 上安装了这个工具 http://mschrag.github.com，我发现它运行良好。
我不确定这是否会在不兼容 XHR/HTML5 的浏览器上回退友好，即只上传没有进度信息？

【问题讨论】：

实际上在XMLHttpRequest 对象中确实有一个onprogress 回调。但是，它是一个新标准，并非所有浏览器都支持它。
请看我上面添加的内容，它有效。感谢您的支持

标签： jquery forms progress

【解决方案1】：

您可以在支持 HTML5 的浏览器中使用新的 XMLHttpRequest 对象来实现此目的。它支持progress 事件，您可以订阅并收到 AJAX 操作的通知。

这是一个例子：

document.getElementById('myForm').onsubmit = function() {
    var xhr = new XMLHttpRequest();

    xhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
            var percentage = Math.round((e.loaded * 100) / e.total);
            document.getElementById('progress').innerHTML = percentage + '%';
        }
    }, false);

    xhr.open(this.method, this.action, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    };

    xhr.send(new FormData(this));
    return false;    
};

这是live demo。

【讨论】：

非常感谢，但这意味着这只适用于支持 HTML5 的浏览器，我不能再使用 jQuery AJAX 了吗？我至少应该在不兼容的浏览器上有一个友好的后备（即不显示进度）......
我在 jQuery 文档中看到 jQuery-AJAX 请求返回一个 xhr 对象，我尝试将它与您的进度事件侦听器一起使用，但它不起作用...
你知道是否可以使用 jQuery ajax 及其返回的 jqXHR-object 吗？
请看我上面添加的内容，它有效。感谢您的支持
您仍然依赖于新的XMLHttpRequest 方法，更具体地说是progress 事件。您的代码将无法在不支持它的浏览器中运行。

【解决方案2】：

也许你可以使用这个 jquery 插件：

https://www.articlage.com/adrianillo/article/DataUploader

只需添加进度条即可上传过程

【讨论】：