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

Question

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

这是我的 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个问题:

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

Answer 1

您可以通过新的XMLHttpRequest来实现这一点支持 HTML5 的浏览器中的对象。它支持 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 .