Добавление ненавязчивого индикатора прогресса в загрузку файлов старой школы
Вы все знаете новое поколение модных, в основном флеш файлов, таких как SWFUpload, которые могут показать индикатор выполнения при загрузке - большое улучшение, особенно для шатких и низкоскоростных соединений.
Однако эти загрузчики привносят свою собственную логику управления загрузками на стороне клиента. Я ищу ненавязчивый способ "ухаживать" за существующими классическими файловыми загрузками, т.е. вводить индикатор выполнения в обычные формы загрузки файлов.
Из-за архитектуры загрузки файлов это, скорее всего, невозможно без некоторой настройки на стороне клиента.
Я ищу решение, которое поддерживает настройку до абсолютного минимума, например. компонент, который добавляет себя к событию onsubmit нормальной формы, выполняет загрузку файла, отображает хороший индикатор выполнения, помещает результирующий временный (серверный) путь к файлу в форму и отправляет его.
На стороне сервера мне просто нужно изменить мой script, чтобы использовать путь к файлу, предоставленный загрузчиком Flash, вместо $_FILES и супругов, и подумайте о безопасности на мгновение.
Это не совсем то, что делают все загрузчики на основе Flash: они могут использовать данные из формы, но они не предоставляют возможности для отправки формы как есть, что я ищу. Я ищу (возможно) функцию загрузки на основе Flash, сделав шаг дальше.
Ответы
Ответ 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;-))