页面加载时，jQuery AJAX 在 Chrome/Chromium 中不会触发

Question

场景：我有一个上传表单，它使用 nginx uploadProgress 模块报告上传进度。下面的代码在 Firefox 中运行良好，但在 Chrome 和 Chromium 中，AJAX 在页面加载时不会触发，只有在我停止请求时才会运行（因此上传到一半时）。我不知道为什么它不起作用。因此，非常感谢任何帮助。

我还发现奇怪的是 Chrome/Chromium 似乎在没有我告诉它的情况下用上传进度更新了窗口状态栏。

我无法看到我在哪里进行设置。 Chrome 有可能有内部进度表吗？

upload.js

$(document).ready(function()
{
    $('form').uploadProgress(
    {
        uploading: function(upload)
        {
            $('#percents').html(upload.percents+'%');
            $('#progressbar').css({width: upload.percents+'%'});
        },
        progressUrl: "/progress",
        interval: 3
    });
})

jquery.uploadProgress.js

/*
* jquery.uploadProgress
*
* Copyright (c) 2008 Piotr Sarnacki (drogomir.com)
*  - Original release.
*  
* Copyright (c) 2011 Mathew Davies ([email protected])
*  - Refactored a lot of code into their own functions 
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
*/
(function($)
{
    /**
     * Generate a UUID used to uniquely identify form uploads.
     *
     * @return string
     */
    function generate_uuid()
    {
        var uuid = "";

        for (i = 0; i < 32; i++)
        {
            uuid += Math.floor(Math.random() * 16).toString(16);
        }

        return uuid;
    }

    /**
     * Calls the progress URL to get the latest statistics from
     * the uploaded form.
     * 
     * @return void
     */
    function update(object, options)
    {
        $.ajax(
        {
            type: 'GET',
            cache: false,
            dataType: options.dataType,
            url: options.progressUrl,
            beforeSend: function(xhr)
            {
                xhr.setRequestHeader("X-Progress-ID", options.uuid);
            },
            success: function(upload)
            {
                alert('progress ...');

                if (upload)
                {
                    if (upload.state == 'uploading')
                    {
                        upload.percents = Math.floor((upload.received / upload.size) * 1024) / 10;
                        options.uploading(upload);
                    }

                    if (upload.state == 'done' || upload.state == 'error')
                    {
                        window.clearTimeout(options.timer);
                    }

                    if (upload.state == 'done')
                    {
                        upload.percents = 100;
                        options.done(upload);
                    }

                    if (upload.state == 'error')
                    {
                        upload.percents = 0;
                        options.error(upload);
                    }
                }
            }
        });
    }

    /**
     * Updates the form action to use the   UUID.
     */
    function update_form_action(form, uuid)
    {
        if(old_id = /X-Progress-ID=([^&]+)/.exec(form.attr("action")))
        {
            var action = form.attr("action").replace(old_id[1], uuid);
        }
        else
        {
            var action = form.attr("action") + "?X-Progress-ID=" + uuid;
        }

        form.attr("action", action);
    }

    $.fn.uploadProgress = function(options)
    {
        var options = $.extend(
        {
            dataType: "json",
            interval: 2000,
            progressUrl: "/progress",
            start: function() {},
            uploading: function() {},
            done: function() {},
            error: function() {},
            timer: ""
        }, options);


        return this.each(function()
        {
            $(this).submit(function()
            {
                var $this = $(this);

                // Generate a new UUID
                options.uuid = generate_uuid();

                // Update form action with ID
                update_form_action($this, options.uuid);

                // Start callback
                options.start();

                // Start process
                options.timer = window.setInterval(function()
                {
                    update($this, options)
                },
                options.interval * 1000);
            });
        });
    }; 
})(jQuery);

Answer 1

Webkit 中似乎报告了一个问题，即 XmlHttpRequest 在文件上传/表单发布期间无法按预期工作。

Chrome 错误报告，包含指向 webkit 的链接：http://code.google .com/p/chromium/issues/detail?id=45196