Создание пользовательского индикатора выполнения загрузки - PullRequest
5 голосов
/ 18 июня 2010

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

То, что я хочу знать, - это то, где я могу прочитать о том, как отобразить индикатор прогресса простой загрузки. У большинства браузеров ниже есть индикатор состояния, но использовать его при работе с клиентами не очень профессионально.

Как браузер это делает? Я хочу знать, как работает браузер, для указания статуса загрузки чего-либо, чтобы, возможно, я мог что-то сделать с помощью PHP и jquery.

Спасибо.

Ответы [ 4 ]

5 голосов
/ 18 июня 2010

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

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

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

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

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

2 голосов
/ 18 июня 2010

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

Задав этот вопрос , я в конечном итоге остановился на использовании plupload для своих потребностей в загрузке.

1 голос
/ 18 июня 2010

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

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

стоит задавать вопросы на форуме на сайте 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);
    }                               
});                         
1 голос
/ 18 июня 2010

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...