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

Добрый день!

Долгое время на просторах интернета я искал информацию о реализации AJAX загрузки файлов для CodeIgniter. Разные разработчики предлагали разные технологии и примеры реализации. Я перепробовал их все, но ни одна из них не была достаточно проста и функциональна одновременно. Лишь недавно я открыл для себя jQuery File Uploader . «Он ничем не отличается от остальных» - скажите вы, но это не так. Его главное отличие - это простота и хорошая документация с примерами. В документации разобраны все callback"и, описаны все options. Внедрение в любую систему не занимает много времени.

Сегодня я покажу как можно очень просто организовать multipart загрузку файлов на сервер + drug&drop в CodeIgniter.

jQuery File Uploader + CodeIgniter Из коробки CodeIgniter предлагает нам использовать библиотеку $this->load->library("upload"); , которая позволяет контролировать передаваемые файлы, ограничивая загрузку по типу, размеру, ширине и высоте изображения. Использовать ее легко и удобно, но следует отметить небольшое ограничение налагаемое на INPUT данной библиотекой. Поле INPUT должно обязательно иметь параметр name=«userfile» . Соглашаемся с этим фактом и переходим в Controller к функции которая будет вызывать библиотеку Upload и, собственно, сохранять наши файлы на диск.

Пример реализации PHP функции:
public function upload(){ $config["upload_path"] = "/application/uploads/"; $config["allowed_types"] = "jpg|jpeg|png|gif|flv|mp4|wmv|doc|docx|xsl|xslx|ppt|pptx|zip|rar|tar"; $config["max_size"] = 2048; $config["max_width"] = 800; $config["max_height"] = 600; $config["encrypt_name"] = TRUE; $this->load->library("upload", $config); if ($this->upload->do_upload() == false) { $error = array("error" => $this->upload->display_errors()); echo json_encode($error); }else{ $data = $this->upload->data(); echo json_encode($data); } }

Внимание! Для того, что бы у Вас работали все allowed_types необходимо дописать недостающие MIME-Types в конфигурационный файл /application/config/mimes.php

У нас готова функция для сохранения файла на сервер. Переходим к клиентской части. Нам понадобится скачать с Github jQuery File Upload . Плагин предоставляет большие возможности, но все их использовать мы не будет, воспользуемся лишь загрузкой нескольких файлов, drug&drop и progressall.

Подключаем на страницу загрузки необходимые JS:
- jquery.fileupload.js - jquery.fileupload-video.js - jquery.fileupload-process.js - jquery.iframe-transport.js - upload.js //В комплекте не идет - напишем сами

И CSS файл:
- css/jquery.fileupload.css

Добавляем наш INPUT на страницу:
Добавить файл

Осталось совсем не много - написать upload.js, который будет прослушивать событие изменения поля INPUT и вызывать загрузку выбранного файла. «А где же обещанный Drug&Drop?» - спросите Вы. Drug&Drop уже работает благодаря jQuery File Upload. Вместо вызова стандартного диалога выбора файла вы можете перетащить сразу несколько файлов на страницу и они в порядке очереди загрузятся на сервер.

И на последок Upload.js
$(document).ready(function(){ $("#fileupload").fileupload({ dataType: "json", progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $(".progress .bar").css("width", progress + "%"); }, done: function (e, data) { if(data.result.error != undefined){ $("#error").html(data.result.error); // выводим на страницу сообщение об ошибке если оно есть $("#error").fadeIn("slow"); }else{ $("#error").hide(); //на случай если сообщение об ошибке уже отображалось $("#files").append(""); $("#success").fadeIn("slow"); } } } }); });

Data - это наш ответ от сервера, но он не является массивом с информацией о загруженном файле. Вся информация в формате JSON хранится в Data.Result. Кстати говоря console.log(data) поможет найти много интересных вещей, таких как: количество отправленных файлов, ошибки и многое другое.

Вот собственно и все, надеюсь на полезность материала.

241

В этой статье мы рассмотрим решение одной из самых распространенных задач – асинхронная загрузка файла на сервер и отображение процесса выполнения. Наш сценарий будет загружать картинки на сервер, показывать индикатор выполнения и затем отображать загруженную картинку. В некоторых случаях вам может потребоваться вернуть идентификатор загруженного вами файла или сделать что-то еще с файлом на бэкенде, например сохранить в базу данных и т.п. В этой статье основной упор сделаем на фронтенд – т.е. реализацию асинхронной загрузки на клиенте.

В качестве тестового проекта создайте пустое приложение ASP.NET MVC в Visual Studio. Мы будем использовать C# на бэкенде (как я уже говорил, основное внимание мы уделим написанию JavaScript, так что для серверной части вы можете использовать любой другой язык). Добавьте библиотеку jQuery с помощью диспетчера пакетов NuGet (View --> Other Windows --> Package manager Console):

Install-Package jQuery

Добавьте в папку Controllers класс контроллера HomeController.cs со следующим содержимым (напомню, контроллер Home используется по умолчанию в настройках маршрутизации проекта – файл /App_Start/RouteConfig.cs):

Using System.Web.Mvc; namespace UploadFiles.Controllers { public class HomeController: Controller { public ActionResult Index() { return View(); } } }

Щелкните правой кнопкой мыши по методу Index и выберите в контекстном меню команду Add View. Visual Studio создаст файл представления /Views/Home/index.cshtml, а также компоновку по умолчанию /Views/Shared/_Layout.cshtml. Давайте подключим библиотеку jQuery в файле компоновки:

@RenderBody()

Здесь мы также добавили сброс стилей CSS для браузера и подключили таблицу стилей /Content/Site.css. Добавьте также файл script.js в папку scripts. Давайте теперь добавим форму для загрузки файлов в проект. Для этого откройте представление Index.cshtml и используйте следующую разметку:

@{ ViewBag.Title = "Index"; }

Перетащите ваши файлы в эту область!

0 %

В элементе section находится форма со вставкой загружаемых файлов. Файлы можно поместить в этот контейнер путем перетаскивания (drag-and-drop) , либо через диалоговое окно после щелчка по элементу section. Элемент progress будет содержать индикатор загрузки файлов, в элементе error будут отображаться ошибки, а контейнер images нужен для отображения сохраненных на сервере картинок.

Теперь нам нужно добавить CSS-стили для страницы. Для этого отредактируйте файл /Content/Site.css следующим образом:

Body { font-family:Arial,Helvetica,sans-serif; } section { position: relative; width: 380px; height: 160px; margin: 40px auto; color: #40444f; border: .2rem dashed #616778; border-radius: 1.5rem; cursor: pointer; -webkit-transition: color 0.2s ease-out, border-color 0.2s ease-out; -moz-transition: color 0.2s ease-out, border-color 0.2s ease-out; transition: color 0.2s ease-out, border-color 0.2s ease-out; overflow: hidden; padding-top: 90px; box-sizing: border-box; } section:hover, section.dd { border-color: #4d90ff; color: #4d90ff; background-color: #e7f0fe; } figure { position: absolute; width: 100%; height: 160px; left: 0; top: 0; display: block; } figure:after { position: absolute; display: block; content: ""; height: 80px; width: 80px; top: 5px; left: 50%; margin-left: -40px; background-repeat: no-repeat; background-size: 80px 80px; background-image: url(https://сайт/my/it/blog/net/images/upload_icon.png); -webkit-transition: opacity 0.2s ease-out, border-color 0.2s ease-out; -moz-transition: opacity 0.2s ease-out, border-color 0.2s ease-out; transition: opacity 0.2s ease-out, border-color 0.2s ease-out; } section:hover figure:after, section.dd figure:after { opacity: .65; } p { text-align: center; font-weight: bold; font-size: 16px; line-height: 24px; } p small { font-weight: normal; font-size: 12px; opacity: .7; } { position: absolute; top: -16rem; opacity: 0; } .error { width: 380px; margin: 0 auto 20px; line-height: 20px; font-size: 14px; color: red; font-style: italic; display: none; text-align: center; } /* Прогресс-бар */ .progress { height: 20px; width: 380px; margin: 0 auto 20px; overflow: hidden; background-color: #999; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1); box-shadow: inset 0 1px 2px rgba(0,0,0,.1); position: relative; display: none; } .progress-bar { height: 100%; font-size: 12px; float: left; width: 0; background-color: #428bca; -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); -webkit-transition: width .6s ease; transition: width .6s ease; } .progress-value { position: absolute; left: 0; top: 0; line-height: 20px; height: 100%; width: 100%; color: #fff; text-align: center; } /* Контейнер с загруженными картинками */ .images { width: 380px; overflow: hidden; margin: 0 auto; } .images a { width: 116px; height: 116px; margin: 0 10px 10px 0; float: left; display: block; box-sizing: border-box; padding: 4px; border: 1px solid #d2d2d2; border-radius: 6px; position: relative; } .images a:hover { border-color: #428bcb; } .images span { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; background-repeat: no-repeat; background-size: contain; background-position: center; }

На данный момент форма выглядит следующим образом:

Теперь нам нужно добавить скрипт, который должен обеспечивать следующий функционал:

При клике по элементу section должно открываться модальное окно с выбором файла.

При перетаскивании файлов из проводника в окно браузера, элемент section должен подсвечиваться как при наведении курсора мыши (для этого мы добавили CSS-класс «dd&raqio;). При отпускании файлов (как и при выборе файла из диалогового окна) должна происходить загрузка картинок на сервер.

При загрузке файлов необходимо добавить индикатор и отобразить процент выполнения загрузки.

В случае ошибки на сервере, необходимо отобразить ошибки и скрыть индикатор.

В случае успешной загрузки картинок на сервер, необходимо отобразить их в контейнере images.

Следующий скрипт (файл script.js) решает все вышеуказанные вопросы:

$(function () { // Программное открытие окна выбора файла по щелчку $("figure").on("click", function () { $(":file").trigger("click"); }) // При перетаскивании файлов в форму, подсветить $("section").on("dragover", function (e) { $(this).addClass("dd"); e.preventDefault(); e.stopPropagation(); }); // Предотвратить действие по умолчанию для события dragenter $("section").on("dragenter", function (e) { e.preventDefault(); e.stopPropagation(); }); $("section").on("dragleave", function (e) { $(this).removeClass("dd"); }); $("section").on("drop", function (e) { if (e.originalEvent.dataTransfer) { if (e.originalEvent.dataTransfer.files.length) { e.preventDefault(); e.stopPropagation(); // Вызвать функцию загрузки. Перетаскиваемые файлы содержатся // в свойстве e.originalEvent.dataTransfer.files upload(e.originalEvent.dataTransfer.files); } } }); // Загрузка файлов классическим образом - через модальное окно $(":file").on("change", function () { upload($(this).prop("files")); }); }); // Функция загрузки файлов function upload(files) { // Создаем объект FormData var formData = new FormData(); // Пройти в цикле по всем файлам for (var i = 0; i < files.length; i++) { // С помощью метода append() добавляем файлы в объект FormData formData.append("file_" + i, files[i]); } // Ajax-запрос на сервер $.ajax({ type: "POST", url: "/Home/Upload", // URL на метод действия Upload контроллера HomeController data: formData, processData: false, contentType: false, beforeSend: function () { $("section").removeClass("dd"); // Перед загрузкой файла удалить старые ошибки и показать индикатор $(".error").text("").hide(); $(".progress").show(); // Установить прогресс-бар на 0 $(".progress-bar").css("width", "0"); $(".progress-value").text("0 %"); }, success: function (data) { if (data.Error) { $(".error").text(data.Error).show(); $(".progress").hide(); } else { $(".progress-bar").css("width", "100%"); $(".progress-value").text("100 %"); // Отобразить загруженные картинки if (data.Files) { // Обертка для картинки со ссылкой var img = ""; for (var i = 0; i < data.Files.length; i++) { // Сгенерировать вставляемый элемент с картинкой // (символ 0 заменяем ссылкой с помощью регулярного выражения) var element = $(img.replace(/0/g, data.Files[i])); // Добавить в контейнер $(".images").append(element); } } } }, xhrFields: { // Отслеживаем процесс загрузки файлов onprogress: function (e) { if (e.lengthComputable) { // Отображение процентов и длины прогресс бара var perc = e.loaded / 100 * e.total; $(".progress-bar").css("width", perc + "%"); $(".progress-value").text(perc + " %"); } } }, }); }

Для сохранения списка файлов и передачи его на сервер через Ajax используется объект FormData .

Обратите внимание, что за отслеживание процесса загрузки отвечает свойство xhrFields объекта, передаваемого методу $.ajax. В этом свойстве хранится объект с функцией обработки события onprogress . Этому событию передается объект со свойствами loaded – объем уже загруженных данных, и total – общий размер данных. Благодаря этим двум параметрам мы можем отображать процесс выполнения загрузки на индикаторе.

В методе $.ajax() мы ссылаемся на метод действия Upload контроллера HomeController, который еще не был добавлен. Давайте исправим это и отредактируем файл HomeController.cs:

Using System; using System.Web; using System.Linq; using System.Web.Mvc; using System.Collections.Generic; using System.IO; namespace UploadFiles.Controllers { public class HomeController: Controller { public ActionResult Index() { return View(); } public JsonResult Upload() { string __filepath = Server.MapPath("~/uploads"); int __maxSize = 2 * 1024 * 1024; // максимальный размер файла 2 Мб // допустимые MIME-типы для файлов List mimes = new List { "image/jpeg", "image/jpg", "image/png" }; var result = new Result { Files = new List() }; if (Request.Files.Count > 0) { foreach (string f in Request.Files) { HttpPostedFileBase file = Request.Files[f]; // Выполнить проверки на допустимый размер файла и формат if (file.ContentLength > __maxSize) { result.Error = "Размер файла не должен превышать 2 Мб"; break; } else if (mimes.FirstOrDefault(m => m == file.ContentType) == null) { result.Error = "Недопустимый формат файла"; break; } // Сохранить файл и вернуть URL if (Directory.Exists(__filepath)) { Guid guid = Guid.NewGuid(); file.SaveAs($@"{__filepath}\{guid}.{file.FileName}"); result.Files.Add($"/uploads/{guid}.{file.FileName}"); } } } return Json(result); } } public class Result { public string Error { get; set; } public List Files { get; set; } } }

Здесь мы получаем файлы из индексатора Files объекта HttpRequestBase , который доступен в контроллере ASP.NET через свойство Request. Далее мы выполняем две простые проверки – размер файла не должен превышать 2 Мб и тип файлов должен быть либо JPG либо PNG. В случае несоответствия файла проверкам в скрипт возвращается объект с ошибкой, которая отображается пользователю. Иначе файл сохраняется в папке uploads проекта, ему присваивается сгенерированное с помощью GUID случайное имя.

Перед тестированием данного примера не забудьте добавить в корень проекта папку uploads.

Как загружать любые файлы, например, картинки на сервер с помощью AJAX и jQuery? Делается это довольно просто! И ниже мы все обстоятельно разберем.

В те «древние» времена, когда еще не было jQuery, а может он был, но браузеры были не так наворочены, загрузка файла на сайт с помощью AJAX была делом муторным: через всякие костыли вроде iframe. Я те время не застал, да и кому это теперь интересно. А интересно теперь другое - что сохранение файлов на сайт делается очень просто. Даже не обладающий опытом и пониманием, того как работает AJAX, вебмастер, сможет быстро разобраться что-куда. А эта статья ему в помощь. Если подкрепить эти возможности функциями WordPress , то безопасная обработка и загрузка файлов на сервер становится совсем плевым и даже интересным делом (пример с WordPress смотрите в конце статьи).

Однако, как бы все просто не было, нужно заметить, что минимальный опыт работы с файлами и базовые знания в Javascript, jQuery и PHP все же необходимы! Минимум, нужно представлять как загружаются файлы на сервер, как в общих чертах работает AJAX и хоть немного надо уметь читать и понимать код.

Описанный ниже метод довольно стабилен, и по сути опирается на Javascript объект new FormData() , базовая поддержка которого есть во всех браузерах.

Для более понятного восприятия материала, он разделен на шаги. На этом все, полетели...

AJAX Загрузка файлов: общий пример

Начинается все с наличия на сайте input поля типа file . Нет необходимости, чтобы это поле было частью формы (тега ).

Таким образом, у нас есть HTML код с file полем и кнопкой «Загрузить файлы».

Загрузить файлы

Шаг 1. Данные из поля file

Первым шагом, нужно получить данные загружаемых файлов.

При клике на file-поле, появляется окно выбора файлов, после выбора, данные о них сохраняются в input поле, а нам нужно их от туда «забрать». Для этого повесим на событие change JS функцию, которая будет сохранять имеющиеся данные file-поля в JS переменную files:

Var files; // переменная. будет содержать данные файлов // заполняем переменную данными, при изменении значения поля file $("input").on("change", function(){ files = this.files; });

Шаг 2. Создаем AJAX запрос (по клику)

Данные файлов у нас есть, теперь их нужно отправить через AJAX. Вешаем это событие на клик по кнопке «Загрузить файлы».

В момент клика создаем новый объект new formData() и добавляем в него данные из переменной files . С помощью formData() мы добьемся того, что отправляемые данные будут выглядеть, как если бы мы просто сабмитили форму в браузере.

Чтобы такой запрос состоялся, в jQuery нужно указать дополнительные AJAX параметры, поэтому привычная функция $.post() не подходит и мы используем более гибкий аналог: $.ajax() .

Два важных дополнительных параметра нужно установить в false:

ProcessData Отключает обработку передаваемых данных. По умолчанию, например, для GET запросов jQuery собирает данные в строку запроса и добавляет эту строку в конец URL. Для POST данных делает другие преобразования. Нам любые изменения исходных данных будут мешать, поэтому отключаем эту опцию... contentType Отключает установку заголовка типа запроса. Дефолтная установка jQuery равна "application/x-www-form-urlencoded . Такой заголовок не предусматривает отправку файлов. Если установить этот параметр в "multipart/form-data" , PHP все равно не сможет распознать передаваемые данные и выведет предупреждение «Missing boundary in multipart/form-data»... В общем, проще всего отключить эту опция, тогда все работает! // обработка и отправка 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("my_file_upload", 1); // AJAX запрос $.ajax({ url: "./submit.php", type: "POST", // важно! data: data, cache: false, dataType: "json", // отключаем обработку передаваемых данных, пусть передаются как есть processData: false, // отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос contentType: false, // функция успешного ответа сервера success: function(respond, status, jqXHR){ // ОК - файлы загружены if(typeof respond.error === "undefined"){ // выведем пути загруженных файлов в блок ".ajax-reply" var files_path = respond.files; var html = ""; $.each(files_path, function(key, val){ html += val +"
"; }) $(".ajax-reply").html(html); } // ошибка else { console.log("ОШИБКА: " + respond.error); } }, // функция ошибки ответа сервера error: function(jqXHR, status, errorThrown){ console.log("ОШИБКА AJAX запроса: " + status, jqXHR); } }); });

Шаг 3. Обрабатываем запрос: загружаем файлы на сервер

Теперь последний шаг: нужно обработать отправленный запрос.

Чтобы было наглядно обработаем запрос без дополнительных проверок для файлов, т.е. просто сохраним полученные файлы в нужную папку. Хотя, для безопасности, отправляемые файлы обязательно нужно проверять, хотя бы расширение (тип) файла...

Создадим файл submit.php с таким кодом (предполагается что submit.php лежит в той же папке, где и файл, с которого отправляется AJAX запрос):

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); } }); }); })