Скачивание файла jquery. Загрузка файлов на сервер с помощью ajax
В этой статье мы рассмотрим решение одной из самых распространенных задач – асинхронная загрузка файла на сервер и отображение процесса выполнения. Наш сценарий будет загружать картинки на сервер, показывать индикатор выполнения и затем отображать загруженную картинку. В некоторых случаях вам может потребоваться вернуть идентификатор загруженного вами файла или сделать что-то еще с файлом на бэкенде, например сохранить в базу данных и т.п. В этой статье основной упор сделаем на фронтенд – т.е. реализацию асинхронной загрузки на клиенте.
В качестве тестового проекта создайте пустое приложение 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.
Наверное многие сталкивались с вопросом "Как загрузить файл на сервер с помощью 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(); });
Скачать файл с исходным кодом:
Это очень интересная статья, о том, как загрузить файлы на сервер с помощью технологии AJAX. Как вы уже знаете, ajax это асинхронный javascript, который позволяет работать с сервером, не перезагружая страницы в браузере. Такая технология очень полезна для реализации нашей идеи: загрузитьфайлы на сервер не перезагружая страницы браузера. Наша идея также может быть реализована другими способами, обо всем этом читайте ниже в нашей статье.
Что мы сегодня узнаем? Загрузка файлов на сервер на AJAX + jQuery + PHPРеализация загрузки файлов на сервер с помощью AJAX, немного сложнее, чем просто отослать текстовый POST или GET запрос. Но не настолько сложно, чтобы понять и освоить эту методику. Если вы еще не совсем понимаете, как взаимодействуют AJAX и PHP, советую сначала прочитать статью о . Но, даже если вы не знаете, как работает технология AJAX, это не страшно, так как мы будем использовать библиотеку jQuery и плагин ajax_upload . И если вы будете следовать всем примерам и инструкциям шаг за шагом, то вы сможете реализовать отличный загрузчик файлов на сервер.
Суть метода: Мы создадим HTML образ загрузчика, который будет в себе содержать: файловое поле ввода, кнопку подтверждения, блок статуса загрузки (будут выводиться: «загружено» или «ошибка»), список ul (будут добавляться новые DOM элементы, другими словами это список загруженных файлов). На кнопку подтверждения мы создадим обработчик на языке JS, при этом будем использовать синтаксис jQuery, и передадим файл плагину ajax_upload, который отправит файл и все нужные данные на серверную сторону. Серверная сторона, это наше PHP приложение, которое сохранит файл в нужную папку и возвратит результат работы. Или же просто возвратит сообщение об ошибке, если что-то пойдет не так. Задание есть, приступим?
HTML код ajax загрузчика
Давайте создадим HTML файл, в котором будет каркас нашего загрузчика файлов. Приведу HTML код, потом объясню что и к чему.
Upload File
Как видите, HTML код ajax загрузчика, невыносимо сложный. Но все же стоит прояснить, что и к чему:
< div id=" upload" > Upload File - это наша кнопка подтверждения загрузки файла на сервер. Далее приведу CSS код оформления.
< span id=" status" > - это блок, в который мы будем помещать ответ серверной стороны приложения. Или «Загружено», или «Ошибка».
< ul id=" files" > - это список файлов, которые были загружены на сервер, нашим jquery + ajax загрузчиком.
Как и было обещано, приведу ниже CSS код стиля, кнопки подтверждения загрузки файла:
#upload{ margin:30px 200px; padding:15px; font-weight:bold; font-size:1.3em; font-family:Arial, Helvetica, sans-serif; text-align:center; background:#f2f2f2; color:#3366cc; border:1px solid #ccc; width:150px; cursor:pointer !important; -moz-border-radius:5px; -webkit-border-radius:5px; }
Серверная PHP сторона приложения
Как упоминалось в сущности метода, серверная сторона всего лишь выполняет копирование (сохранение) файла и возвращает результат своей работы («Загружено» или «Ошибка»). Но, это только пример, на который полагаться не стоит. Здесь нет защиты от хакерских взломов, и не установлены ограничение на размер файлов. Если у вы будете создавать загрузчик для всеобщего пользования, то обязательно реализуйте вышеперечисленные дополнения. Ниже приведен PHP код примера загрузчика файлов, создайте файл с именем upload- file. php , и поместите в него следующий код:
Если внимательно присмотреться, то заметите что здесь все написано русским текстом, а точнее:
$ uploaddir – каталог на сервере, куда будут загружаться файлы.
$ file – имя загружаемого файла, к которому прикрепляется путь к серверному каталогу.
Самое простое уже сделано. Впереди самое интересное – jQuery + AJAX сторона загрузчика файлов.
JavaScript код
Как и в любом другом приложении, использующем JS, код должен быть помещен в шапку (head), документа. Еще одно важное замечание: перед написанием данного JS кода, не забудьте заранее подключить библиотеку jQuery и плагин ajax_ upload . Если вы уже это сделали, отлично, приступим к написанию кода:
$(function(){
var btnUpload=$("#upload");
var status=$("#status");
new AjaxUpload(btnUpload, {
action: "upload-file.php",
//Имя файлового поля ввода
name: "uploadfile",
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// Валидация расширений файлов
status.text(Только JPG, PNG, GIF файлы");
return false;
}
status.text("Uploading...");
},
onComplete: function(file, response){
//Очищаем текст статуса
status.text("");
//Добавляем загруженные файлы в лист
if(response==="success"){
$("").appendTo("#files").html("
"+file).addClass("success");
} else{
$("").appendTo("#files").text(file).addClass("error");
}
}
});
});
Сначала, мы инициализируем доступ к кнопке подтверждения загрузки, и записываем в переменную btnUpload . Заодно и получаем доступ к блоку серверных сообщений (status ). Далее идет работа с плагином ajax upload . Создаем новый объект и указываем нужные нам параметры:
Action – путь к нашему серверному обработчику загруженных файлов.
Name – это имя поля ввода, с которого мы будем получать загружаемый на сервер файл.
onSubmit – Функции, которые выполняются перед ajax загрузкой файлов на сервер. В нашем случае, это валидация загружаемых файлов (проверка поддерживаемых расширений). Но опять, проверка, как говорится для «недалеких», эту проверку легко обойти, поэтому стоит еще раз проверять на серверной стороне приложения.
status. text – текст, который выводится в процессе ajax загрузки файлов на сервер. Заметьте, если файлы не поддерживаемые, то выводится сообщение об ошибке.
onComplete – Запускаем функцию по завершению загрузки файла на сервер. В этой функции: очищаем значение status.text; добавляем загруженные файлы в лист files .
Как видите загрузить файлы на сервер с помощью AJAX, проще, чем казалось. Но все-таки, меня смущает наличие библиотеки jQuery в данном методе. И если вы знаете, как реализовать ajax загрузку файлов без использования jQuery, убедительная просьба сообщить в комментариях к статье.
Загрузка нескольких файлов на сервер на AJAX, jQuery, PHPЕсли вам, для личных нужд, необходимо сделать красивую загрузку нескольких файлов на сервер с помощью AJAX и PHP, то вам придется использовать некоторые дополнения к библиотеке jQuery. А именно:
jQuery Form Plugin v2.18
Плагин для корректной ajax работы с полями и формами.
Где взять: www.malsup.com/jquery/form/
jQuery BlockUI Plugin v2.14
Плагин, позволяющий выводить красивые сообщения об ошибке.
Где взять: www.malsup.com/jquery/block/
jQuery Multiple File Upload Plugin v1.31
Плагин для библиотеки jQuery, который, позволяет загружать несколько файлов одновременно.
Где взять: www.fyneworks.com/jquery/multiple-file-upload/
Если вы уже скачали все эти плагины, и само собой, библиотеку jQuery, можем приступать к разработке. Также, нам необходимо создать PHP файл, как и в предыдущем примере, который будет обрабатывать данные на серверной стороне. Назовем его: doajaxfileupload.php . Теперь, поподробнее.
jQuery Form Plugin – отличный плагин, он используется для отправки файлов на сервер методом ajax. Этому плагину, можно найти и другие применения.
jQuery BlockUI Plugin – используется в эстетических целях, для вывода красивых сообщений о корректности работы плагина Multiple File Upload Plugin.
Multiple File Upload Plugin – этот плагин, основа нашего мульти файлового загрузчика. Он позволяет выбрать несколько файлов. При этом, он имеет гибкие настройки, для ограничения типа файлов, установки количества загружаемых файлов, проверяет файл на дубликаты (если такой файл уже выбран) и т.д.
Теперь у нас есть все что необходимо, мы можем начать разработку скрипта ajax загрузки нескольких файлов.
В файле index.php, думаю и так все понятно. Здесь находится, собственно форма загрузки файлов и подключаются библиотека jQuery и все необходимые плагины для работы с ajax. Несколько слов по коду и настройке плагинов:
$(".MultiFile").MultiFile({ accept:"jpg|gif|bmp|png|rar", max:15, STRING: { remove:"удалить", selected:"Выбраны: $file", denied:"Неверный тип файла: $ext!", duplicate:"Этот файл уже выбран:\n$file!" }});
Указываете расширения файлов допускаемых к загрузке, указываете максимальное количество загружаемых файлов.
$("#loading").ajaxStart(function(){({ ... });
Показывает и убирает анимацию при ajax загрузке файлов на сервер.
$("#uploadForm").ajaxForm({ ... });
Отвечает за отправку файлов на сервер.
doajaxfileupload.php – это наша серверная сторона приложения, в нем все достаточно понятно, если вам необходимо, можете отредактировать на свой вкус.
Пожалуй, все о загрузке нескольких файлов на сервер методом AJAX, jQuery и PHP. Надеюсь, у вас все работает, также хорошо как у меня.
Загрузка файлов на JS + IFRAME + PHPЕсли вы поклонник не красоты, а функциональности и компактности кода, то для вас есть хорошая новость. Загружать файлы на сервер без перезагрузки страницы, можно не только с помощью AJAX и всяких там jQuery плагинов. Также, это можно реализовать с помощью простого JavaScript, iframe (фреймов) и php (он всегда необходим). Дело в том, что на AJAX, невозможно реализовать загрузку файлов. XmlHttpRequest не способный загружать файлы. Хотя, это можно обойти. С помощью технологии Remote Scripting . В частности используя IFRAME . Интересно то, что мы будем создавать форму как при обычной загрузке файлов, только в форме мы будем указывать target="rFrame" , ссылаться на скрытый iframe, который будет перезагружен, но визуально этого не отобразиться. После перезагрузки, из серверной php стороны приложения, будет возвращен JS вызов функции, который завершит загрузку файла.
Данный загрузчик простой, состоит из двух файлов, и весит около 1 КБ. Ближе к делу. Создайте ваш HTML файл и поместите туда код:
function onResponse(d) { eval("var obj = " + d + ";"); alert("Файл " + obj.filename + (obj.success ? " " : " НЕ ") + "загружен."); }
Здесь мы видим практически те же компоненты, что и при простой загрузке файлов на сервер, только: target=" rFrame" – про который мы уже говорили выше; функция onResponse – она получает JSON объект, который мы присылаем из серверной стороны. Также, не забудьте указать multipart/ form- data , без которого, форма не будет загружать файлы. Далее, посмотрим на серверный код, файла handler.php :
Серверная сторона приложения, аналогична к первому примеру данной статьи, за исключением вывода javascript кода, который будет, выполнятся после перезагрузки iframe, и сообщит нам о результате загрузки файла.
Очень простой и интересный скрипт. Конечно, вы можете усовершенствовать его.
В этой статье я покажу, как добавить на сайт функционал для загрузки файлов с помощью 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 и добавьте в него приведенный ниже код.