В этой статье я покажу, как добавить на сайт функционал для загрузки файлов с помощью jQuery, AJAX и MySQL.

Базовые настройки

Что нужно:

  • PHP 7.1.
  • MySQL.
  • Файл JQuery / Ajax.

Теперь займемся написанием скрипта для загрузки файлов.

СозданиеPHP-скрипта загрузки файлов

Пошаговый процесс:

  • Создайте HTML-форму загрузки на основе Bootstrap.
  • Создайте Ajax-скрипты для загрузки файлов.
  • Примените проверку безопасности.
  • Создайте PHP-скрипты для обработки данных.
Создание HTML-формы

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 и добавьте в него приведенный ниже код.

jQuery(document).ready(function($){ // ссылка на файл AJAX обработчик var ajaxurl = ""; var nonce = ""; var files; // переменная. будет содержать данные файлов // заполняем переменную данными, при изменении значения поля file $("input").on("change", function(){ files = this.files; }); // обработка и отправка AJAX запроса при клике на кнопку upload_files $(".upload_files").on("click", function(event){ event.stopPropagation(); // остановка всех текущих JS событий event.preventDefault(); // остановка дефолтного события для текущего элемента - клик для тега // ничего не делаем если files пустой if(typeof files == "undefined") return; // создадим данные файлов в подходящем для отправки формате var data = new FormData(); $.each(files, function(key, value){ data.append(key, value); }); // добавим переменную идентификатор запроса data.append("action", "ajax_fileload"); data.append("nonce", nonce); data.append("post_id", $("body").attr("class").match(/postid-(+)/)); var $reply = $(".ajax-reply"); // AJAX запрос $reply.text("Загружаю..."); $.ajax({ url: ajaxurl, type: "POST", data: data, cache: false, dataType: "json", // отключаем обработку передаваемых данных, пусть передаются как есть processData: false, // отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос contentType: false, // функция успешного ответа сервера success: function(respond, status, jqXHR){ // ОК if(respond.success){ $.each(respond.data, function(key, val){ $reply.append(""); }); } // error else { $reply.text("ОШИБКА: " + respond.error); } }, // функция ошибки ответа сервера error: function(jqXHR, status, errorThrown){ $reply.text("ОШИБКА AJAX запроса: " + status); } }); }); })