Автор оригинала: David Wong.
Подготовка
Теперь в nginx добавлен модуль загрузки nginx, но его нельзя использовать напрямую. Еще предстоит кое-что подготовить.
Подготовьте сценарий JavaScript
Во-первых, скачайте или перейдите по ссылке на jquery.js напрямую, потому что модуль использует jQuery для управления ходом отображения HTML – элементов.
... ...
или
... ...
Ключ в том, что нужен другой сценарий: jquery.uploadprogress.js. Вы можете скачать его здесь.
Будьте осторожны
Не забудьте включить скрипт на свою страницу. Аналогично, поскольку jQuery изменился и больше не поддерживает $. Браузер. Сафари, нам нужно изменить jquery.uploadprogress.js. Поместите весь этот код:
$.browser.safari
Пересмотрено на:
navigator.userAgent.match(/safari/i)
Это исправление отсюда. Первоначальное намерение-для ie. вы можете рисовать тыквы, как вам нравится. В оригинале говорилось:
...
as far of jquery 1.9 jQuery.browser was removed, adn admin_menu get this error:
"Uncaught TypeError: Cannot read property 'msie' of undefined" (admin_menu.js - line:223)
For quick fix use this code:
change line 223:
- if ($.browser.msie && parseInt(jQuery.browser.version) == 6) {
+ if (navigator.userAgent.match(/msie [6]/i)) {
...Изменить файл конфигурации nginx
Сначала измените файл/etc/nginx.conf, увеличьте размер файла, разрешенного для загрузки, и настройте интервал размера отчета о ходе загрузки, который установлен как отчет 50 КБ.
http {
##
# Basic Settings
##
...
# server_names_hash_bucket_size 64;
# server_name_in_redirect off;
# REV:[email protected]: Change size from 2m to 256m.
client_max_body_size 256M;
# REV:[email protected]: Followed the instruction of http://wiki.nginx.org/HttpUploadProgressModule
upload_progress proxied 50k;
...Измените местоположение ~. Раздел PHP $в файле/etc/nginx/доступные сайты/по умолчанию. Согласно руководству, трек “загрузки” должен быть последней строкой.
location ~ \.php$ { ... # track uploads in the 'proxied' zone # remember connections for 30s after they finished track_uploads proxied 30s; }
И добавьте следующее:
location ^~ /progress {
upload_progress_json_output;
report_uploads proxied;
}Причина использования загрузки? Прогресс? ДЖСОН? Вывод состоит в том, что jQuery будет анализировать данные в соответствии с режимом JSON. Без этой строки синтаксический анализ завершается неудачно, и прогресс не может быть отображен.
Изменить конфигурацию PHP
Откройте файл/etc/PHP5/FPM/php.ini и измените следующее:
... ; Whether to allow HTTP file uploads. ; http://php.net/file-uploads file_uploads = On ... ;post_max_size = 8M post_max_size = 256M ... ; Maximum allowed size for uploaded files. ; http://php.net/upload-max-filesize ;upload_max_filesize = 2M upload_max_filesize = 256M ...
Разрешить загрузку файлов и разрешить загрузку файлов до 256 млн. Если файл слишком мал, он будет завершен в мгновение ока, и прогресс не будет виден.
Написание страниц
Теперь напишите страницу загрузки. Допустим, это называется learn.php. Содержание выглядит следующим образом:
Будьте осторожны
Страница может не запускаться на вашем компьютере, поскольку путь к сценарию не соответствует вашей реальной ситуации.
Затем напишите страницу после загрузки, предполагая, что имя ulfile.php, и содержание выглядит следующим образом:
";
if ($_FILES["file1"]["error"] > 0)
{
echo "Error:" . $_FILES["file1"]["error"] . "
";
}
else
{
echo "Source File: " . $_FILES["file1"]["name"] . "
";
echo "Type: " . $_FILES["file1"]["type"] . "
";
echo "Size: " . round($_FILES["file1"]["size"] / 1024) . " kB
";
echo "Stored in: " . $_FILES["file1"]["tmp_name"];
echo "
";
$uploaddir = './upload/'; // /usr/share/nginx/www/upload/';
//Note that English filenames do not need to be decoded, but Chinese filenames do.
// $uploadfile = $uploaddir . basename($_FILES['file1']['tmp_name']);
$uploadfile = $uploaddir . html_entity_decode(basename($_FILES['file1']['name']));
echo "Destination:" . $uploadfile . "
";
if (move_uploaded_file($_FILES['file1']['tmp_name'], $uploadfile))
{
echo "File successfully uploaded.
";
/*If you don't want to save, just test the progress bar, you can delete it immediately after the upload.
if (!unlink($uploadfile))
echo "Can't delete the uploaded file.
";
*/
}
else
echo "Failed to save file.
";
}
}Обратите внимание, что если у вас возникли проблемы с каталогом, например, с использованием каталога загрузки здесь, но вы этого не делаете, вам необходимо настроить такой каталог и установить соответствующие разрешения (root). Хорошо, теперь вы можете наслаждаться индикатором выполнения загрузки, будьте осторожны, чтобы не разорвать жесткий диск.
Чаевые
Проблемы в основном сосредоточены на пути, таком как путь JS, разрешения каталога, фатальные ошибки 413 и т.д.
Оригинал: “https://developpaper.com/nginx-tips-php-uploading-progress-bar-0010/”