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

是否有可能使用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",contentType: "application/x-www-form-urlencoded;charset=UTF-8"
        }
    });

这似乎有效,尽管还有

2个问题：

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

最佳答案

您可以使用支持HTML5的浏览器中的新XMLHttpRequest对象来实现此目的.它支持您可以订阅的进度事件,并获得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.

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

猜你在找的jQuery相关文章