Блог

Сценарий: У меня есть форма загрузки, которая сообщает о ходе загрузки с использованием модуля 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 (thepixeldeveloper@googlemail.com)
*  - 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=([^amp;] )/.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);
  

Похоже, что в Webkit сообщается о проблеме, из-за которой XMLHttpRequest не работает должным образом во время загрузки файлов / сообщений формы.

Отчет об ошибке Chrome со ссылками на webkit здесь:http://code.google.com/p/chromium/issues/detail?id=45196