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

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

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

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

Благодарю.

Solutions Collecting From Web of "Создание пользовательской панели выполнения загрузки"

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

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

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

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

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

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

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

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

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

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

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

пример:


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

стоит задавать вопросы на форуме на сайте 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); } });