javascript - 跟踪基本 HTML 表单发布进度

Question

我有一个基本的 HTML 表单，可以正常提交，根本没有 ajax。此表单使用常规邮寄提交到同一文件。我不使用 AJAX，因为表单有 12 个文本字段和至少 1 个图像，但最多可能有 26 个图像，而 ajax 不能同时处理表单和图像，我必须保存到数据库中，而且很多AJAX 的额外工作量。

问题是我需要以某种方式跟踪表单上传进度。大多数程序员都知道在浏览器的左下角或右下角查看表单提交进度。但大多数人并不知道这一点。

所以我想显示一个进度条。问题是我发现所有进度条都使用 ajax 的 XHR 请求。由于表单不是 ajax，我似乎无法找到跟踪进度的方法。

那么有没有办法拦截浏览器内部的提交进度，看看表单上传完成的百分比呢？

编辑

我在页面的开头尝试了以下代码，但它不起作用。我猜是因为 XHR 是用于 AJAX 或浏览器有它自己的需要劫持，但我不知道这将被称为什么或如果是这样的话如何得到它:

xhr = new XMLHttpRequest();
xhr.upload.addEventListener( "progress", function ( evt )
{
    if( evt.lengthComputable )
    {
        var progressPercent = ( evt.loaded / evt.total ) * 100;
        console.log( value );
    }
}, false );

Answer 1

这是我有时使用的某种渐进增强。它仍然会发出 ajax 请求，但以对用户和开发人员都尽可能透明的方式。关键是通过 FormData 发布与常规表单发布的完全相同的数据，并在我们从服务器收到整页响应时替换整个文档。这是一个未经测试的简化版本:

function enhanceFormWithUploadProgress(form, progress) {
//form : the HTML form element to enhance.
//progress : an HTML element that will display upload progress.

    //testing browser support. if no support for the required js APIs, the form will just be posted naturally with no progress showing.
    var xhr = new XMLHttpRequest();
    if (!(xhr && ('upload' in xhr) && ('onprogress' in xhr.upload)) || !window.FormData) {
        return;
    }

    form.addEventListener('submit', function(e) {
        //prevent regular form posting
        e.preventDefault();

        xhr.upload.addEventListener('loadstart', function(event) {
            //initializing the progress indicator (here we're displaying an element that was hidden)
            progress.style.display = 'block';
        }, false);

        xhr.upload.addEventListener('progress', function(event) {
            //displaying the progress value as text percentage, may instead update some CSS to show a bar
            var percent = (100 * event.loaded / event.total);
            progress.innerHTML = 'Progress: ' + percent.toFixed(2) + '%';
        }, false);

        xhr.upload.addEventListener('load', function(event) {
            //this will be displayed while the server is handling the response (all upload data has been transmitted by now)
            progress.innerHTML = 'Completed, waiting for response...';
        }, false);

        xhr.addEventListener('readystatechange', function(event) {
            if (event.target.readyState == 4 && event.target.responseText) {
                //we got a response from the server and we're replacing the whole current document content with it, simulating a page reload
                var newDocument = document.open('text/html', 'replace');
                newDocument.write(event.target.responseText);
                newDocument.close();
            } else {
                throw new Error('Error in the response.');
            }
        }, false);

        //posting the form with the same method and action as specified by the HTML markup
        xhr.open(this.getAttribute('method'), this.getAttribute('action'), true);
        xhr.send(new FormData(this));

    });

};