jQuery的AJAX上传大量文本字段进步(jQuery AJAX upload progress

是否有可能获得与使用jQuery阿贾克斯非常大的文本框的形式上传，进展如何？我认为客户知道多少字节发送完毕，但是当我在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"
        }
    });

这似乎工作，altough仍有

2个问题：

在我的本地连接是太快了，所以很难看到“进步”的实际工作。我安装这个工具http://mschrag.github.com第二Mac上的同一网络中，我看到它的工作完美。
我不知道这是否会回退非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 。