Как создать PHP-скрипт для загрузки файлов с помощью jQuery и AJAX. Ajax и PHP. Загрузка изображения на сервер

Наверное многие сталкивались с вопросом "Как загрузить файл на сервер с помощью JS и JQuery?".
И вероятно не у всех получилось это сделать. На самом деле все не так сложно как кажется.
В данном уроке я опишу процесс загрузки файла на сервер(хостинг) .
Для обмена данными между браузером и веб-сервером, используется технология ajax.
Версия JQuery используемая в рецепте: 2.2.2.

Создаем примитивную разметку из тегов html, head и body.
В теге head необходимо прописать путь до библиотеки jquery.
В примере я использую jquery с сервера google.

В теге body создаем форму, которая состоит из тега input и button.
С помощью input type="file" осуществляется выбор файла для загрузки.
Тег button необходим для запуска js кода на передачу файла.

Форме задаем name="uploader", enctype="multipart/form-data", method="POST".
Имя формы: name="uploader"
Способ кодирования данных формы: enctype="multipart/form-data"
Метод передачи данных: method="POST"

Отправить этот файл: Загрузить

Весь код html и js разметки:
Отправить этот файл: Загрузить

Переходим к java script коду.
Для передачи файла необходимо передавать форму целиком:
$("form").submit(function(e) {

Считываем данные формы в переменную:
var formData = new FormData($(this));

Далее для передачи данных на веб-сервер используем технологию ajax.
В случае успешной передачи файла во всплывающем окне будет отображено соответствующее сообщение.
В случае возникновения ошибки или отсутствии файла будет отображено сообщение с текстом возникшей проблемы.
$.ajax({ url: "file.php", type: "POST", data: formData, async: false, success: function (msg) { alert(msg); }, error: function(msg) { alert("Ошибка!"); }, cache: false, contentType: false, processData: false });

Весь код на java script с использование jquery:

Теперь остался код на стороне сервера для приема данных с формы методом POST запроса.

Получаем корневую директорию сайта и назначаем папку для загрузки файлов:
$uploaddir = $_SERVER["DOCUMENT_ROOT"].DIRECTORY_SEPARATOR."uploads".DIRECTORY_SEPARATOR;

Считываем загружаемый файл:
$uploadfile = $uploaddir . basename($_FILES["userfile"]["name"]);

Проверяем загружен ли файл.
В соответствии с входящими данными назначаем сопровождающее сообщение.
Если файл не загружен, загружаем в директорию указанную в $uploadfile:
if (move_uploaded_file($_FILES["userfile"]["tmp_name"], $uploadfile)) { $out = "Файл корректен и был успешно загружен.\n"; } else { $out = "Возможная атака с помощью файловой загрузки!\n"; }

При выполнении указанных действий возвращается ответ.

Весь код на php:

Весь html код включая js:

Отправить этот файл: Загрузить $("form").submit(function(e) { var formData = new FormData($(this)); $.ajax({ url: "file.php", type: "POST", data: formData, async: false, success: function (msg) { alert(msg); }, error: function(msg) { alert("Ошибка!"); }, cache: false, contentType: false, processData: false }); e.preventDefault(); });

Скачать файл с исходным кодом:

В этой статье я покажу, как добавить на сайт функционал для загрузки файлов с помощью 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 и добавьте в него приведенный ниже код.