Добавление ненавязчивого индикатора выполнения для загрузки файлов старой школы - PullRequest
Новая
       4

Добавление ненавязчивого индикатора выполнения для загрузки файлов старой школы

19 голосов
/ 30 октября 2009

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

Однако все эти загрузчики несут собственную логику обработки загрузок на стороне клиента. Я ищу ненавязчивый способ «изобразить» существующие классические загрузки файлов, т. Е. введение индикатора выполнения в обычные формы загрузки файлов .

Из-за архитектуры загрузки файлов это, скорее всего, невозможно без некоторых настроек на стороне клиента.

Я ищу решение, которое сводит настройку к абсолютному минимуму, например, Компонент, который добавляет себя в событие onsubmit обычной формы, выполняет загрузку файла, отображает приятный индикатор выполнения, помещает результирующий временный (на стороне сервера) путь к файлу в форму и отправляет его. На стороне сервера мне просто нужно изменить свой сценарий, чтобы использовать путь к файлу, предоставленный загрузчиком флэш-памяти, вместо $ _FILES и consorts, и немного подумать о безопасности.

Это не совсем то, что делают все загрузчики на основе Flash: они могут использовать данные из формы, но не предоставляют возможности отправлять форму как есть, что я и ищу. Я ищу (вероятно) функцию загрузки на основе Flash, сделав шаг вперед .

Ответы [ 6 ]

5 голосов
/ 05 февраля 2010

Если вы используете PHP 5.2 и выше, IBM поможет вам в этом руководстве по загрузке файлов .

Этот учебник по загрузке нескольких файлов использует jQuery + AJAX Upload ... Он использует $ _FILES на стороне сервера и преобразует специальный

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

Если настроить последний слишком сложно, Uber-Uploader на SourceForge - еще один вариант.

Есть десятки проектов с открытым исходным кодом, охватывающих эту тему. К сожалению, это не так просто реализовать (по крайней мере, так, как вы хотите - иначе мы бы видели это уже в старые добрые времена Netscape).

С другой стороны, HTML5 облегчит это, как вы можете видеть в этой демонстрации и этой .

Надеюсь, это поможет, и удачи вам в интеграции.

3 голосов
/ 10 февраля 2010

Мы реализовали это очень просто, установив расширение PECL pecl-uploadprogress и добавили простой обратный вызов AJAX к формам:

Создание ключа загрузки: 

$upload_id = genUploadKey();
function genUploadKey ($length = 11) {
  $charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  for ($i=0; $i < $length; $i++)
    $key .= $charset[(mt_rand(0,(strlen($charset)-1)))];
  return $key;
}

Создание обработчика обратного вызова AJAX (например, uploadprogress.php): 

extract($_REQUEST);

// servlet that handles uploadprogress requests:
if ($upload_id) {
  $data = uploadprogress_get_info($upload_id);
  if (!$data)
    $data['error'] = 'upload id not found';
  else {
    $avg_kb = $data['speed_average'] / 1024;
    if ($avg_kb<100)
      $avg_kb = round($avg_kb,1);
    else if ($avg_kb<10)
      $avg_kb = round($avg_kb,2);
    else $avg_kb = round($avg_kb);

    // two custom server calculations added to return data object:
    $data['kb_average'] = $avg_kb;
    $data['kb_uploaded'] = round($data['bytes_uploaded'] /1024);
  }

  echo json_encode($data);
  exit;
}

// display on completion of upload:
if ($UPLOAD_IDENTIFIER) {
...

Загрузите библиотеки jQuery и jQuery.uploadprogress (которые также включают приведенный выше фрагмент) и интегрируйте с вашей формой: 

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.uploadprogress.0.3.js"></script>
<script type="text/javascript">
jQuery(function () {
    // apply uploadProgress plugin to form element
    // with debug mode and array of data fields to publish to readout:
    jQuery('#upload_form').uploadProgress({
        progressURL:'uploadprogress.php',
        displayFields : ['kb_uploaded','kb_average','est_sec'],
        start: function() {
            $('.upload-progress').show();
        },
    success: function() {
            $('.upload-progress').hide();
            jQuery(this).get(0).reset();
        }
    });
});
</script>

Добавьте это к форме загрузки: 

<input name="UPLOAD_IDENTIFIER" type="hidden" value="$upload_id" />

Это должно сработать. Это извлечено из нашей базы кода и может не работать "из коробки". Но это должно сказать вам идею.

3 голосов
/ 31 октября 2009

jquploader использует информацию в форме, такую ​​как значение атрибута действия, в качестве сценария загрузки. Но я не обновлял его некоторое время, и в нем отсутствуют все скрипты с поясами и свистками, такие как uploadify (что, между прочим, является отличным скриптом). Посмотрите, может ли это быть основой для вас, чтобы настроить.

1 голос
/ 30 октября 2009

Соответствует ли техника, используемая в Uploadify (плагин jQuery), вашим потребностям? Демо

0 голосов
/ 31 августа 2010

Вам нужно будет проверить размер части файла, который уже находится на сервере, а затем получить его на клиенте для Ajax, где вы можете нарисовать индикатор выполнения. (Не забудьте предварительно проверить размер отверстия данных, чтобы рассчитать перкантаж ;-))

0 голосов
/ 10 февраля 2010

Как забавно, я только что увидел блог Саймона Уиллисона о Plupload , который, как мне кажется, представляет собой библиотеку JavaScript, которая выполняет индикаторы загрузки файлов (помимо прочего).

Он использует Flash, Silverlight или все, что доступно, но я думаю, что все это абстрагируется от вас, поэтому вы все еще загружаете с помощью обычной формы HTML.

...