Создание пользовательского индикатора выполнения загрузки

Я знаю, что это не то, что вы ищете, но я недавно использовал plupload для загрузки, и это кажется довольно хорошим, плюс не полагается исключительно на flash или html5

пример:

• URL - это страница обработки (php file)
• container = родительский div или форма, в которой находится кнопка загрузки (очень важно установить это - есть несколько примеров того, как вы можете прикреплять вещи к определенным действиям, которые выполняет plupload. например, ниже вы можете увидеть Я прикрепил uploader.start (); к хуку uploader.start (); .
• вы также сможете увидеть, как я сделал пользовательский прогресс загрузки bar, прикрепив к хуку выполнения загрузки

, стоит задавать вопросы на форуме на сайте plupload, если вы застряли, они умеют на них отвечать!

$(function(){
    //plupload
    var uploader = new plupload.Uploader({
        runtimes : 'gears,html5,flash',
        browse_button : 'pickfiles',
        container : 'form_2',
        max_file_size : '10mb',
        url : '<?php echo SITE_ROOT ?>plupload/upload.php',
        //resize : {width : 320, height : 240, quality : 90},
        flash_swf_url : '<?php echo SITE_ROOT ?>plupload/js/plupload.flash.swf',
        filters : [
            {title : "Image files", extensions : "jpg,gif,png"}
        ]
    });


uploader.init();

uploader.bind('FilesAdded', function(up, files) {
    uploader.start();
});

uploader.bind('UploadProgress', function(up, file) {
    if(file.percent < 100 && file.percent >= 1){
        $('#progress_bar div').css('width', file.percent+'%');
    }
    else{
        $('#progress_bar').fadeOut(600);
    }                               
});                         

Поскольку вы хотите использовать PHP, я бы начал с расширения uploadprogress (PHP по умолчанию не предоставляет вам никаких данных, пока загрузка не будет завершена). ; это расширение обеспечивает такую ​​функциональность на стороне сервера). Обратите внимание, что для него требуется PHP 5.2+ , и он может придирчиво относиться к параметрам конфигурации. См. Также его комментарий и демонстрацию и советы по устранению неполадок ). Краткий обзор доступен в документации PHP комментарии .

Используя расширение, вы можете получить некоторую статистику по загрузке; затем вы можете опросить сервер через AJAX и обновить какой-то индикатор выполнения.

Чтобы быть более конкретным:

• получить уникальный идентификатор для формы и включить его в скрытое поле
• загрузка должна выполняться в IFRAME - некоторые браузеры не позволяют обновлять DOM для того же страница, на которой выполняется загрузка
• , опрашивает сервер через AJAX (используя идентификатор, чтобы указать, какая загрузка вас интересует) и анализирует результат (IIRC, вы получите что-то вроде "bytes_uploaded => 123, content-length => 1000 ")
• обновите индикатор выполнения (способ отображения зависит от вас, я использую" x% done "плюс графическая панель)
• перенаправить всю страницу, когда форма загружена ОК

(Oh и, кстати, проверьте настройки PHP upload_max_filesize и post_max_size, поскольку оба ограничивают максимальный размер загрузки)

Не существует надежного метода для получения информации о ходе загрузки файла с помощью JavaScript. Поддержка события XMLHttpRequest upload.onprogress отсутствует во многих браузерах, даже при использовании HTML5 вам неизбежно придется использовать Flash или другой метод загрузки файлов.

Задав этот вопрос , я в конце концов решил использовать plupload для своих нужд загрузки.

Javascript / Ecmascript не может связываться с собственными функциями браузера (который использует C / C ++ в основном вместе с API-интерфейсами ОС , которые обращаются к TCP / UDP сокеты.

Чтобы отобразить индикатор выполнения с JS , вам потребуется обратная связь с сервером. Это может быть выполнено с помощью опроса сервера , например COMET , например. Но на данный момент он никогда не бывает таким точным, как встроенный в браузер индикатор выполнения. Возможно, это изменится с HTML5 WebSockets .

Чтобы получить точный результат, необходимо постоянное соединение. Вы можете подделать и gild задержку запроса клиент-сервер, но она все еще существует. Я не знаю точно, как Flash решает эти проблемы, но я предполагаю, что у него также нет потока, ориентированного на соединение (поправьте меня, если я ошибаюсь).