Это очень интересная статья, о том, как загрузить файлы на сервер с помощью технологии AJAX. Как вы уже знаете, ajax это асинхронный javascript, который позволяет работать с сервером, не перезагружая страницы в браузере. Такая технология очень полезна для реализации нашей идеи: загрузитьфайлы на сервер не перезагружая страницы браузера. Наша идея также может быть реализована другими способами, обо всем этом читайте ниже в нашей статье.

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

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

Очень простой и интересный скрипт. Конечно, вы можете усовершенствовать его.

Добрый день!

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

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

Пример реализации 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) поможет найти много интересных вещей, таких как: количество отправленных файлов, ошибки и многое другое.

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

В наше время веб-сайты становятся все более интерактивными. Это касается не только специализированных сервисов, но и обычных интернет магазинов, блогов и небольших сайтов. Основной особенностью является асинхронный JavaScript и XML сокращенно AJAX . Эта технология позволяет браузеру в фоновом режиме общаться с веб-сервером и при обновлении данных, веб-страница не перезагружается полностью. Другими словами, мы можем делать запросы и получать ответы от сервера не перезагружая страницу в браузере.

Поскольку наиболее популярным языком для разработки веб-приложений является PHP , то сегодня мы будем использовать связку AJAX и PHP . Пример будет хорош для понимания основных принципов работы с AJAX и PHP .

На самом деле особых сложностей быть не должно, алгоритм действий:

• Выбрать картинку
• Нажать кнопку “Отправить”
• Перехватить вызов формы с помощью JavaScript (jQuery)
• Передать содержимое в специальный php скрипт-обработчик
• Вернуть результат выполнения
• Обработать результат при помощи JavaScript (jQuery)
• Вывести пользователю информацию о загрузке

Немного отклонюсь от темы и объясню что такое jQuery . jQuery — это специальная JavaScript библиотека, которая помогает упростить разработку веб приложений в несколько раз, также данная библиотека предоставляет API для работы с AJAX . Простыми словами, мы напишем меньше кода, чем если бы это делали на чистом JS.

Ajax позволяет не перезагружая веб-страницу, обмениваться данными с веб-сервером и обновлять ее содержимое.

Я склоняюсь к тому, что если есть инструмент, который позволяет вам ускорить разработку без последствий, то почему бы его не использовать? Но чистый JS тоже не помешало бы знать(хоть и лично мой уровень владения JS равен уровню копипаста примеров со stackoverflow 🙂).

Мы разберем одну из проблем, которую мне однажды пришлось решать, а именно — загрузка изображения на сайт с предварительным просмотром. Если вы меняли аватарку в вконтакте, вы понимаете о чем я пишу.

Нам понадобится 3 простых файла, это:

• Страница с формой
• php обработчик
• файл js

Обычная html страница с формой. Обратите внимание на enctype="multipart/form-data" , это нужно для передачи файлов, параметр указывает на способ кодирования данных. Если передаете файлы, значение всегда должно быть multipart/form-data .

Это очень упрощенный обработчик. Имя картинки я сгенерировал использовав функцию hash . Хорошей практикой считается изменять имена файлов при загрузке их на сервер.

В этом скрипте происходит самое интересное. При помощи функции readImage() мы будем считывать файл с поля формы и передавать его в блок для предварительного просмотра. Создается объект FileReader . Он позволяет веб-приложению считывать содержимое файла на компьютере пользователя. Событие.onload сработает когда содержимое будет считано, при помощи этого события мы выведем изображение в блок предварительного просмотра.
И напоследок, метод.readAsDataURL() запускает процесс чтения файла, по завершению чтения будет выполнено событие.onload и картинка появится у вас на экране.

Функция printMessage создана для вывода информации об успешной или провалившейся попытке загрузки файла. Подробно не рассматриваем, ничего особенного не представляет.

Перехват формы и её обработка. При клике на кнопку «Отправить» событие будет перехвачено скриптом и при помощи функции.preventDefault() форма не отправит данные в index.html . .preventDefault() служит для отмены вызова каких-либо событий.

Объект FormData нужен нам для создания POST запроса к нашему скрипту, это намного проще чем вписывать каждый элемент формы в строку. Создали объект, заполнили данными, отдали в наш ajax .

Ну и собственно сам запрос AJAX . Поскольку мы используем библиотеку jQuery , составить и выполнить такой запрос не вызовет у вас никаких проблем.

Собственно, на этом и закончим. Изображение загружается, страница не перезагружается, все довольны. Если у вас возникают вопросы или предложения, пишите комментарии.

Хорошего дня и успехов 🙂

Последнее обновление: 1.11.2015

В статье были рассмотрены общие моменты оптравки файлов на сервер в обычном запросе POST. Но если мы используем Ajax-запросы, то загрузка файлов будет иметь свои особенности.

Сначала определим метод в контроллере MVC:

Public JsonResult Upload() { foreach (string file in Request.Files) { var upload = Request.Files; if (upload != null) { // получаем имя файла string fileName = System.IO.Path.GetFileName(upload.FileName); // сохраняем файл в папку Files в проекте upload.SaveAs(Server.MapPath("~/Files/" + fileName)); } } return Json("файл загружен"); }

Здесь предполагается, что у нас в проекте определена папка Files для хранения загруженных файлов. Для получения файлов используется коллекция Request.Files

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

Код представления тогда будет выглядеть следующим образом:

@{ ViewBag.Title = "Home Page"; }
Загрузить @section scripts{ $("#submit").on("click", function (e) { e.preventDefault(); var files = document.getElementById("uploadFile").files; if (files.length > 0) { if (window.FormData !== undefined) { var data = new FormData(); for (var x = 0; x < files.length; x++) { data.append("file" + x, files[x]); } $.ajax({ type: "POST", url: "@Url.Action("Upload", "Home")", contentType: false, processData: false, data: data, success: function (result) { alert(result); }, error: function (xhr, status, p3) { alert(xhr.responseText); } }); } else { alert("Браузер не поддерживает загрузку файлов HTML5!"); } } }); }

Нам не нужна стандартная форма, все делается через ajax. Сначала получаем все выбранные файлы:

Var files = document.getElementById("uploadFile").files

Затем формируем объект FormData , в который добавляем все выбранные файлы:

Var data = new FormData(); for (var x = 0; x < files.length; x++) { data.append("file" + x, files[x]); }

И отсылаем их на сервер.

В Web API контроллер будет выглядеть следующим образом:

Public class ValuesController: ApiController { public async Task Post() { if (!Request.Content.IsMimeMultipartContent()) { return BadRequest(); } var provider = new MultipartMemoryStreamProvider(); // путь к папке на сервере string root = System.Web.HttpContext.Current.Server.MapPath("~/Files/"); await Request.Content.ReadAsMultipartAsync(provider); foreach (var file in provider.Contents) { var filename = file.Headers.ContentDisposition.FileName.Trim("\""); byte fileArray = await file.ReadAsByteArrayAsync(); using (System.IO.FileStream fs = new System.IO.FileStream(root + filename, System.IO.FileMode.Create)) { await fs.WriteAsync(fileArray, 0, fileArray.Length); } } return Ok("файлы загружены"); } }

Здесь используется асинхронная обработка запроса. Вначале метод IsMultipartContent() проверяет, содержит ли запрос корректные данные. Если нет, то возвращаем статусный код 401.

Для асинхронного чтения с потока создается провайдер:

Var provider = new MultipartMemoryStreamProvider(); Request.Content.ReadAsMultipartAsync(provider);

После считывания потока свойство provider.Contents будет содержать все считанные значения, в том числе и файлы. И в цикле проходим по всем файлам и читаем их в массив байтов:

Byte fileArray = await file.ReadAsByteArrayAsync();

Затем с помощью объекта FileStream считанный массив сохраняется на диске в папке проекта.

Представление будет тем же, что и для MVC, за исключением url запроса:

$.ajax({ type: "POST", url: "api/values/post", contentType: false, processData: false, data: data, success: function (result) { alert(result); }, error: function (xhr, status, p3) { alert(status); } });

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

Поговорим о сегодняшнем дне. Сегодня для более удобной загрузки изображений всё чаще используют технологию Ajax, которая позволяет загружать изображения на сервер без перезагрузки страницы. Кроме того, с помощью данной технологии стало возможным более гибко интегрировать функционал загрузки файлов на сервер с интерфейсом веб-приложений, к примеру с различными визуальными редакторами.

Является достойной альтернативой стандартного загрузчика файлов на сервер. Простое, интуитивно понятное меню, состоящее из нескольких командных кнопок. Позволяет выбрать множество файлов для загрузки, выбранные файлы выстраиваются в список очереди загрузок, это показывается визуально на форме. Процесс загрузки файлов сопровождается анимированным индикатором выполнения. Загрузчик можно произвольно стилизовать, используя CSS и XHTML. Плагин использует библиотеку MooTools, и работает во всех современных браузерах.

– так же хорош, как и предыдущий загрузчик файлов, реализован на JQuery. Плагин настраивается как для единой загрузки файлов, так и для множественной. Файлы, выбранные для загрузки, выстраиваются в список. Для каждого загружаемого файла отображается анимированный индикатор выполнения загрузки файла. Интерфейс простой и ненавязчивый, командных кнопок по минимуму. Для работы так же требуется поддержка Flash. Интегрирование в проект производится довольно просто. Распространяется по лицензии GPL и MIT, это говорит о том, что плагин так же можно использовать и коммерческих продуктов.

Valum’s AJAX File Uploader – Ещё один из простых но удобных загрузчиков файлов на сервер. Кому приходилось пользоваться ранее данным продуктом заметят, что проект продолжает жить. Уже теперь вторая версия, в некоторой степени доработанная. Довольно простой интерфейс, загрузка файлов, так же как и в предыдущих загрузчиках сопровождается визуальной индикацией статуса выполнения загрузки. Работает во всех современных браузерах, и не требует дополнительных библиотек для своей работы.

Загрузчик был создан разработчиками WebDeveloper+ , по всей видимости, он не планировался как отдельный проект, название у него банальное. Однако это не говорит о том, что он плох, он так же может быть полезен, как и плагины, о которых говорилось выше. Интерфейс прост, одна кнопка, посредством которой можно выбрать набор файлов для загрузки на сервер. В процессе загрузки показываются миниатюрки изображений. В блоге разработчиков есть описание по применению. Для работы плагина так же требуется библиотека JQuery.

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

Плагин загрузки файлов реализованный с помощью JQuery. Пользователю предстоит выбрать несколько файлов по отдельности, затем нажать на кнопку старта загрузки файлов. Загрузка файлов сопровождается индикатором, в котором показывается скорость загрузки, скаченный объем, время до окончания.