Большинство веб-приложений, которые имеют функционал публикации материалов, содержат форму для загрузки файлов на сервер. Стоит признать, что стандартное поле для загрузки файлов на сервер проблематично стилизуется, да и не дает возможности должным образом адаптировать под свои задачи, по этим и другим причинам использование простого поля загрузки, верно, уходит в прошлое.
Поговорим о сегодняшнем дне. Сегодня для более удобной загрузки изображений всё чаще используют технологию Ajax, которая позволяет загружать изображения на сервер без перезагрузки страницы. Кроме того, с помощью данной технологии стало возможным более гибко интегрировать функционал загрузки файлов на сервер с интерфейсом веб-приложений, к примеру с различными визуальными редакторами.
Является достойной альтернативой стандартного загрузчика файлов на сервер. Простое, интуитивно понятное меню, состоящее из нескольких командных кнопок. Позволяет выбрать множество файлов для загрузки, выбранные файлы выстраиваются в список очереди загрузок, это показывается визуально на форме. Процесс загрузки файлов сопровождается анимированным индикатором выполнения. Загрузчик можно произвольно стилизовать, используя CSS и XHTML. Плагин использует библиотеку MooTools, и работает во всех современных браузерах.
– так же хорош, как и предыдущий загрузчик файлов, реализован на JQuery. Плагин настраивается как для единой загрузки файлов, так и для множественной. Файлы, выбранные для загрузки, выстраиваются в список. Для каждого загружаемого файла отображается анимированный индикатор выполнения загрузки файла. Интерфейс простой и ненавязчивый, командных кнопок по минимуму. Для работы так же требуется поддержка Flash. Интегрирование в проект производится довольно просто. Распространяется по лицензии GPL и MIT, это говорит о том, что плагин так же можно использовать и коммерческих продуктов.
Valum’s AJAX File Uploader v2.0
Valum’s AJAX File Uploader – Ещё один из простых но удобных загрузчиков файлов на сервер. Кому приходилось пользоваться ранее данным продуктом заметят, что проект продолжает жить. Уже теперь вторая версия, в некоторой степени доработанная. Довольно простой интерфейс, загрузка файлов, так же как и в предыдущих загрузчиках сопровождается визуальной индикацией статуса выполнения загрузки. Работает во всех современных браузерах, и не требует дополнительных библиотек для своей работы.
AJAX Multiple File Upload Form Using jQuery
Загрузчик был создан разработчиками WebDeveloper+ , по всей видимости, он не планировался как отдельный проект, название у него банальное. Однако это не говорит о том, что он плох, он так же может быть полезен, как и плагины, о которых говорилось выше. Интерфейс прост, одна кнопка, посредством которой можно выбрать набор файлов для загрузки на сервер. В процессе загрузки показываются миниатюрки изображений. В блоге разработчиков есть описание по применению. Для работы плагина так же требуется библиотека JQuery.
— плагин для загрузки файлов на сервер. Для работы плагин использует библиотеку JQuery. На демо-странице сайта описаны варианты настроек внешнего вида плагина, которые могут быть использованы в тех или иных случаях. Форма загрузки имеет индикатор выполнения загрузки, так же показываются проценты выполнения – об этом я не дописал в предыдущих плагинах, в некоторых из них они так же присутвуют. Визуально всё удобно и простенько. После стилизации он неплохо может вписаться в интерфейс вашего проекта.
Плагин загрузки файлов реализованный с помощью JQuery. Пользователю предстоит выбрать несколько файлов по отдельности, затем нажать на кнопку старта загрузки файлов. Загрузка файлов сопровождается индикатором, в котором показывается скорость загрузки, скаченный объем, время до окончания.
В сети существует множество библиотек реализующих загрузку файлов на сервер. Так что у разработчика есть широкий выбор каким инструментом можно воспользоваться. Но порой они довольно сложные для новичком. Изначально для статьи было решено написать простую библиотеку, которую будет легко понять. Но по счастью в сети была найдена довольно простая реализация загрузки фалов, которой было и решено воспользоваться. Называется она dmuploader и является плагином для jQuery.
С помощью dmuploader мы создадим загрузчик, похожий по дизайну на тот, что реализован в wordpress. С Drag And Drop’ом и кликами! Преступим!
Структура проекта:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | #dropzone { border : 4px dashed #bbb ; border-radius : 5px ; color : #444 ; padding : 25px ; text-align : center ; } #dropzone .title { font-size : 20px ; } #dropzone input { -moz-border-bottom-colors: none ; -moz-border-left-colors: none ; -moz-border-right-colors: none ; -moz-border-top-colors: none ; border-color : transparent ; border-image: none ; cursor : pointer ; direction : ltr ; margin : 0 ; opacity: 0 ; position : absolute ; right : 0 ; top : 0 ; transform: translate(-300px , 0px ) scale(4 ) ; } #dropzone .browser span { background : #f7f7f7 ; border : 1px solid #ccc ; color : #555 ; cursor : pointer ; font-size : 16px ; height : 46px ; line-height : 44px ; padding : 0 36px ; } #dropzone .browser span:hover { border : 1px solid #999 ; } |
Javascript:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | // index.php
$(document)
.ready
(function
()
{
$("#dropzone"
)
.dmUploader
({
url:
"upload.php"
,
dataType:
"json"
,
maxFileSize:
256
*
1014
,
allowedTypes:
"image/*"
,
onBeforeUpload:
function
(id)
{
$)
.show
()
;
}
,
onUploadSuccess:
function
(id,
response)
{
$("div#output"
)
.html
(" |
Все! Клиенсткая часть готова. Немного подробнее:
Сервер
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | // upload.php require_once __DIR__ . "/protected/bootstrap.php" ; if (! IS_POST() || ! $_FILES ) { stopAndResponseMessage("error" , "Только POST, FILES" } $files = convertFileInformation($_FILES ) ; if (! isset ($files [ "file" ] ) ) { stopAndResponseMessage("error" , "Файл не загружался" ) ; } $file = $files [ "file" ] ; if ($file [ "error" ] !== UPLOAD_ERR_OK) { stopAndResponseMessage( "error" , uploadCodeToMessage($file [ "error" ] ) ) ; } $mimeType = guessMimeType($file [ "tmp_name" ] ) ; if (! $mimeType ) { stopAndResponseMessage("error" , "Тип файла не распознается!" ) ; } $validMimeType = [ "image/png" , "image/jpeg" ] ; if (! in_array ($mimeType , $validMimeType ) ) { stopAndResponseMessage( "error" , "Загружать можно только png и jpeg!" ) ; } $size = filesize ($file [ "tmp_name" ] ) ; if ($size > 256 * 1024 ) { stopAndResponseMessage("error" , "Файл слишком большой!!" ) ; } $uploadDir = __DIR__ . "/files" ; if (! is_writable ($uploadDir ) ) { stopAndResponseMessage( "error" , "Папка для файлов не доступна для записи." ) ; } $filename = time () . "-" . mt_rand (0000 , 9999 ) . "." . guessFileExtension($mimeType ) ; if (! move_uploaded_file ( $file [ "tmp_name" ] , $uploadDir . "/" . $filename ) ) { stopAndResponseMessage("error" , "Файл не был перемецен!" ) ; } sendResponse("upload" , [ "url" => "files/" . $filename ] ) ; |
Стоит заострить особое внимание на функции guessMimeType. Она с помощью расширения FileInfo определяет MIME тип файла. Как видно из кода, тип и размер файла, присланные от браузера не определяются при проверке. Их может подделать злоумышленник.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //protected/inc/func.php function guessMimeType($path , $magicFile = null ) { if (! is_file ($path ) ) { return null ; } if (! is_readable ($path ) ) { return null ; } if (! $finfo = new \finfo(FILEINFO_MIME_TYPE, $magicFile ) ) { return ; } return $finfo -> file ($path ) ; } |
На основе демо вы можете углубить свои знания в этой области. В исходных кодах даны ссылки для дальнейшего изучения. Эксперементируйте!
В этой статье я покажу, как добавить на сайт функционал для загрузки файлов с помощью jQuery, AJAX и MySQL.
Базовые настройкиЧто нужно:
- PHP 7.1.
- MySQL.
- Файл JQuery / Ajax.
Теперь займемся написанием скрипта для загрузки файлов.
СозданиеPHP-скрипта загрузки файловПошаговый процесс:
- Создайте HTML-форму загрузки на основе Bootstrap.
- Создайте Ajax-скрипты для загрузки файлов.
- Примените проверку безопасности.
- Создайте PHP-скрипты для обработки данных.
HTML-форма — это интерфейс, через который пользователь передает данные серверу. Чтобы форма работала с файлами, нужно установить для элемента метод POST.
Еще одним важным атрибутом формы является enctype . Для него нужно установить значение multipart / form-data . А для атрибута type элемента загрузки файлов должно быть установлено значение file.
Создайте файл index.php и добавьте в него приведенный ниже код.
Ajax File Upload with jQuery andPHP
NAME
EMAIL
www.Cloudways.com
В этой форме я использовал классы Bootstrap, чтобы применить для формы некоторые стили. Я также указал в атрибуте action файл ajaxupload.php . Использование jQuery и AJAX для загрузки файлов
Для отправки данных и загрузки файлов будет использоваться jQuery и AJAX. Поэтому я начну с подключения библиотеки jQuery.
$(document).ready(function(e){ $("#form").on("submit",(function(e){ e.preventDefault(); $.ajax({ url:"ajaxupload.php", type:"POST", data: newFormData(this), contentType:false, cache:false, processData:false, beforeSend:function() { //$("#preview").fadeOut(); $("#err").fadeOut(); }, success:function(data) { if(data=="invalid") { // неверный формат файла. $("#err").html("Invalid File !").fadeIn(); } else { // просмотрзагруженногофайла. $("#preview").html(data).fadeIn(); $("#form").reset(); } }, error:function(e) { $("#err").html(e).fadeIn(); } }); })); });
В приведенном выше коде метод $ajax() используется для отправки данных.
Настройка и подключение базы данных MySQL с помощью PHPСледующим шагом будет настройка базы данных MySQL. Создайте таблицу с именем . Поля таблицы: name , email , file_name :
CREATE TABLE`uploading`(`id`int(11)NOTNULLAUTO_INCREMENT, `name`varchar(100)COLLATE utf8_unicode_ci NOTNULL, `email`varchar(100)COLLATE utf8_unicode_ci NOTNULL, `file_name`varchar(100)COLLATE utf8_unicode_ci NOTNULL, PRIMARY KEY(`id`))ENGINE=InnoDB DEFAULTCHARSET=utf8 COLLATE=utf8_unicode_ci;
Затем создайте файл db.php , предназначенный для соединения базы данных с PHP-приложением. Вставьте в него фрагмент кода, приведенный ниже:
После того, как файл загружен во временную папку, и вся его информация сохранена в массиве, вызывается функция move_uploaded_file() . Она предназначена для перемещения файла из текущего временного местоположения в постоянную директорию. Процесс загрузки файла можно описать следующим образом:
1. Проверяем, возникли ли ошибки при загрузке.
2. Проверяем, разрешен ли тип загружаемого файла.
3. Проверяем, что загружаемый файл имеет допустимый размер.
4. Проверяем, является ли имя загружаемого файла корректным (если имя файла содержит /, это повлияет на путь сохранения).
5. Проверяем, что загружаемый файл еще не существует.
6. Загружаем файл.
Напишем PHP-скрипт для работы с функциями загрузки файлов. Создайте файл ajaxupload.php и добавьте в него приведенный ниже код.
