大型文本字段的jQuery AJAX上传进度 [英] jQuery AJAX upload progress for large text fields

问题描述

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

Is it possible to get the upload-progress for a form with very large textfields using jQuery ajax? I think the client knows how much bytes have been sent, but when I Google I only find solutions for file-uploads using server-site code.

这是我的ajax请求:

This is my ajax-request:

$.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"之类的参数，其中包含已发送的字节数...

I was hoping there would be something like "onProgress" with a parameter containing the amount of bytes already sent...

找到了解决方案

$.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"
        }
    });

这似乎可行，尽管仍然存在

this seems to work, altough there are still

2个问题:

1. 我的localhost上的连接速度太快，因此很难看到进度"实际上在起作用.我在同一网络中的另一台Mac上安装了该工具 http://mschrag.github.com 运行正常.
2. 我不确定这是否会在不兼容XHR/HTML5的浏览器上回退友好，即仅上传没有进度信息吗?

1. the connection on my localhost is way too fast, so it's hard to see the "progress" actually working. I installed this tool http://mschrag.github.com on a second Mac in the same network and I see that it's working perfectly.
2. I'm not sure if this will fall-back friendly on non-XHR/HTML5-compatible browsers, i.e. just upload without progress information?

推荐答案

您可以使用新的

You could achieve this with the new XMLHttpRequest object in HTML5 capable browsers. It supports the progress event that you could subscribe to and be notified of the AJAX operation.

这是一个例子:

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上传进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！