页面加载时，jQuery AJAX不会在Chrome / Chromium中启动

问题描述

| 场景：我拥有的是一个上传表单，该表单使用Nginx uploadProgress模块​​报告上传进度。下面的代码在Firefox中可以正常工作，但是使用Chrome和Chromium时，页面加载时不会触发AJAX，并且仅在我停止请求时才运行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,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);

    

解决方法

似乎Webkit中存在一个已报告的问题，其中XmlHttpRequest在文件上载/表单发布期间无法按预期工作。 带此处的Webkit链接的Chrome错误报告：http://code.google.com/p/chromium/issues/detail?id=45196