Подтвердить что ты не робот

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

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

Мы реализовали это очень просто, установив расширение 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" />

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

Ответ 2

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

Этот несколько загружаемых файлов использует jQuery + AJAX Upload... Он использует $_FILES на стороне сервера и преобразует специальный <div> на стороне клиента, чтобы сделать <form> . Я думаю, вы можете настроить его в соответствии с вашими потребностями.

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

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

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

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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