AJAX и PHP загрузка файла


Javascript — JQuery Ajax Загрузка файла

Могу ли я использовать следующий код jQuery для загрузки файла с использованием метода post запроса Ajax?

Если это возможно, нужно ли заполнять часть «данные»? Это правильный путь? Я размещаю файл только на стороне сервера.

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

Решение

загрузка файла не возможно через ajax.
Вы можете загрузить файл, не обновляя страницу, используя IFrame.
Вы можете проверить более подробно Вот

ОБНОВИТЬ:

С XHR2 поддерживается загрузка файлов через AJAX. Например. через FormData объект, но, к сожалению, он не поддерживается всеми / старыми браузерами.

Поддержка FormData начинается со следующих версий настольных браузеров.
IE 10+,
Firefox 4.0+,
Chrome 7+,
Safari 5+,
Опера 12+

Для более подробной информации смотрите MDN ссылка

Другие решения

Iframes больше не нужен для загрузки файлов через ajax. Я недавно сделал это сам. Проверьте эти страницы:

Обновил ответ и убрал его. Используйте функцию getSize, чтобы проверить размер, или используйте функцию getType, чтобы проверить типы.
Добавлен прогрессбар html и css код.

Как использовать класс Upload

Прогрессбар css код

Возможна запись в Ajax и загрузка файла. я использую jQuery $.ajax функция для загрузки моих файлов. Я пытался использовать объект XHR, но не смог получить результаты на стороне сервера с PHP.

Как видите, вы должны создать объект FormData, пустой или из (сериализованный? — $(‘#yourForm’).serialize()) существующей формы, а затем прикрепите входной файл.

Для процесса PHP вы можете использовать что-то вроде этого:

Простая форма загрузки

Я опаздываю на это, но я искал решение для загрузки изображений на основе ajax, и ответ, который я искал, был немного разбросан по всему посту. Решение, на котором я остановился, включало объект FormData. Я собрал основную форму кода, который я собрал. Вы можете увидеть, как он показывает, как добавить настраиваемое поле в форму с помощью fd.append (), а также как обрабатывать данные ответа, когда выполняется запрос ajax.

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

AJAX-загрузка действительно возможна с XMLHttpRequest (). Нет необходимости в фреймах. Процесс загрузки может быть показан.

Ajax-загрузка файлов с индикатором

IT блог — Ajax-загрузка файлов с индикатором

В настоящее время довольно популярным решением для веб-сайтов является работа пользователя со страницей без ее перезагрузки. В основном это делается с помощью Ajax – технологии асинхронного взаимодействия с сервером, основанной на объекте XMLHttpRequest. Мы описывали работу с Ajax с помощью библиотеки jQuery в статьях jQuery и Ajax и Использование Ajax.

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

Цукерберг рекомендует:  Формы HTML5 разметка

Ajax на практике.

Загрузка файлов.

Серия статей «Ajax на практике«

  • Основы передачи данных
  • Получение данных из формы
  • Загрузка файлов
  • Progress Bar — индикатор процесса загрузки
  • Запрос на чистом JavaScript

В прошлой статье, мы пробежались по нескольким основным методам для получения данных и их дальнейшей передаче AJAX-запросом. Теперь пришло время поговорить о том, как же можно загружать файлы с помощью AJAX. Еще до недавнего времени, способов загружать файлы без перезагрузки самой страницы, было не так уж и много (скрытый iframe, Flash). Они и сейчас используются по причине того, что еще остаются пользователи со старыми версиями браузеров, которых не коснулся прогресс. Но оглядываться назад не будем, посему шагаем в ногу со временем.

Рассмотрим, на мой взгляд, один из самых удобных способов для работы с файлами (и не только) — объект FormData. Пусть будет такая простенькая форма, для загрузки аватара пользователя:

HTML (файл index.html)

Перейдем к JS-части. С полем «Ф.И.О» сложностей не будет и его используем только для наглядности того, что вместе с файлом, мы можем отправлять любые другие данные.

jQuery (файл script.js)

(*)Обратите внимание на то, что передаем форму не объектом jQuery, а DOM-элемент

PHP-обработчик (файл handler.php)

‘; $req = ob_get_contents(); ob_end_clean(); echo json_encode($req); // вернем полученное в ответе exit; >


Если всё было сделано правильно, то на экране нам выведится информация в таком виде:

Ясное дело, что выводить эту информацию нам не потребуется, а нужно будет сохранять файл на сервере, указав ему место «постоянной прописки» ;). Как загружать/сохранять файлы средствами php, я описывать тут не буду, т.к. тема не маленькая и ей можно посветить отдельную статью. Для самых нетерпеливых, могу дать пару намёков — используем: move_uploaded_file(), getimagesize(), Fileinfo и другие полезные функции. И не забывайте, что очень желательно задавать файлам уникальные имена, т.к. при совпадении имён и расширений, старый файл будет попросту перезаписан новым.

«Замечтательно! — скажите вы. — А как же быть, если нужно загрузить несколько файлов одновременно?» Ничего сверхъестественного и существует несколько способов реализации:

  1. Используем атрибут multiple (в нашем случае, позволяет для одного поля input указывать несколько файлов). Добавляем этот атрибут в наше поле и изменяем его имя, добавив квадратные скобки «[]». Это укажет, что мы передаем массив данных из этого поля: Способ хороший, но к сожалению не все браузеры с ним дружат.
  2. Заранее подготовить несколько полей, которым так же можно указать одинаковые имена массивом: Это уже кроссбраузерный вариант, но и он имеет маленькие недостатки при определённых обстоятельствах. К примеру, мы создали два поля, а пользователю необходимо загрузить три и более файлов.
  3. Динамическое добавление полей. Тут мы создаем одно поле и добавляем какую-нибуть кнопку, по нажатию на которую, пользователь сможет добавлять необходимое кол-во дополнительный полей. Каким способом добавлять поля — дело вашего вкуса и фантазии. Можно заранее подготовить код поля в JS, присвоив его переменной, можно клонировать уже существующий элемент — clone() и т.д.

Во всех трёх вариантах, на стороне сервера, мы получим массив файлов и, как с любым другим массивом, обрабатываем его в цикле.

Ещё одним моментом, который сто́ит затронуть — это добавление файлов (и других данных) в FormData, если формы, как таковой, нету или данные берутся из других источников. Для этой задачи, будем использовать метод append(), который похож на jQuery-метод append(), но выполняет немного другой функционал. Синтаксис метода:

Где параметры: name Имя поля, данные которого передаются в параметре value. По сути, если мы взяли данные не из поля формы, у которого есть атрибут name, то мы этот name задаём сами. value Значение поля. Может быть типа Blob, File или string filename Необязательный параметр. Для типов Blob и File — имя файла, сообщаемое серверу

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

Вуаля, собственно новые данные добавлены к набору передавемых на сервер. Наша дата будет в переменной $_POST[‘date_upl’]. Для добавления еще одной и более пары «ключ — значение», используем ту же конструкцию. С файлами дело обстоит так же, но нужно учитывать, что значением является DOM-элемент, а не объект jQuery. И напомню, что абсолютно все данные, приходящие от клиента , должны в обязательном порядке подвергаться проверке, фильтрации, валидации и т.д.!

На этом можно было бы поставить многоточие, но не точку, т.к. тема обширна и всегда будут обстоятельства, которые потребуют нестандартных путей решения. Осталось еще пара небольших вопросов, которые относятся к данной теме, но я решил их вынести в отдельные статьи. Непосредственно по теме загрузки файлов — создание прогрессбара (индикатора выполнения загрузки на сервер) и Ajax на чистом (нативном) JS, без использования фреймворков.

AJAX загрузка файлов на сервер + jQuery, IFRAME, PHP

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

Что мы сегодня узнаем?

Загрузка файлов на сервер на AJAX + jQuery + PHP

Реализация загрузки файлов на сервер с помощью AJAX, немного сложнее, чем просто отослать текстовый POST или GET запрос. Но не настолько сложно, чтобы понять и освоить эту методику. Если вы еще не совсем понимаете, как взаимодействуют AJAX и PHP, советую сначала прочитать статью о взаимодействии PHP и AJAX. Но, даже если вы не знаете, как работает технология AJAX, это не страшно, так как мы будем использовать библиотеку jQuery и плагин ajax_upload. И если вы будете следовать всем примерам и инструкциям шаг за шагом, то вы сможете реализовать отличный загрузчик файлов на сервер.

Суть метода: Мы создадим HTML образ загрузчика, который будет в себе содержать: файловое поле ввода, кнопку подтверждения, блок статуса загрузки (будут выводиться: «загружено» или «ошибка»), список ul (будут добавляться новые DOM элементы, другими словами это список загруженных файлов). На кнопку подтверждения мы создадим обработчик на языке JS, при этом будем использовать синтаксис jQuery, и передадим файл плагину ajax_upload, который отправит файл и все нужные данные на серверную сторону. Серверная сторона, это наше PHP приложение, которое сохранит файл в нужную папку и возвратит результат работы. Или же просто возвратит сообщение об ошибке, если что-то пойдет не так. Задание есть, приступим?

HTML код ajax загрузчика

Давайте создадим HTML файл, в котором будет каркас нашего загрузчика файлов. Приведу HTML код, потом объясню что и к чему.

Как видите, HTML код ajax загрузчика, невыносимо сложный. Но все же стоит прояснить, что и к чему:

UploadFile — это наша кнопка подтверждения загрузки файла на сервер. Далее приведу CSS код оформления.

— это блок, в который мы будем помещать ответ серверной стороны приложения. Или «Загружено», или «Ошибка».

— это список файлов, которые были загружены на сервер, нашим jquery + ajax загрузчиком.

Цукерберг рекомендует:  Основы адаптивнойкроссбраузерной вёрстки

Как и было обещано, приведу ниже CSS код стиля, кнопки подтверждения загрузки файла:

Серверная PHP сторона приложения

Как упоминалось в сущности метода, серверная сторона всего лишь выполняет копирование (сохранение) файла и возвращает результат своей работы («Загружено» или «Ошибка»). Но, это только пример, на который полагаться не стоит. Здесь нет защиты от хакерских взломов, и не установлены ограничение на размер файлов. Если у вы будете создавать загрузчик для всеобщего пользования, то обязательно реализуйте вышеперечисленные дополнения. Ниже приведен PHP код примера загрузчика файлов, создайте файл с именем upload-file.php, и поместите в него следующий код:

Если внимательно присмотреться, то заметите что здесь все написано русским текстом, а точнее:

$uploaddir – каталог на сервере, куда будут загружаться файлы.

$file – имя загружаемого файла, к которому прикрепляется путь к серверному каталогу.

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

Самое простое уже сделано. Впереди самое интересное – jQuery + AJAX сторона загрузчика файлов.


JavaScript код

Как и в любом другом приложении, использующем JS, код должен быть помещен в шапку (head), документа. Еще одно важное замечание: перед написанием данного JS кода, не забудьте заранее подключить библиотеку jQuery и плагин ajax_upload. Если вы уже это сделали, отлично, приступим к написанию кода:

Сначала, мы инициализируем доступ к кнопке подтверждения загрузки, и записываем в переменную btnUpload. Заодно и получаем доступ к блоку серверных сообщений (status). Далее идет работа с плагином ajaxupload. Создаем новый объект и указываем нужные нам параметры:

Action – путь к нашему серверному обработчику загруженных файлов.

Name – это имя поля ввода, с которого мы будем получать загружаемый на сервер файл.

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

status.text – текст, который выводится в процессе ajax загрузки файлов на сервер. Заметьте, если файлы не поддерживаемые, то выводится сообщение об ошибке.

onComplete – Запускаем функцию по завершению загрузки файла на сервер. В этой функции: очищаем значение status.text; добавляем загруженные файлы в лист files.

Как видите загрузить файлы на сервер с помощью AJAX, проще, чем казалось. Но все-таки, меня смущает наличие библиотеки jQuery в данном методе. И если вы знаете, как реализовать ajax загрузку файлов без использования jQuery, убедительная просьба сообщить в комментариях к статье.

Далее мы рассмотрим более развитый метод ajax загрузки файлов, который позволяет загружать несколько файлов одновременно.

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

MultipleFileUploadPlugin – этот плагин, основа нашего мульти файлового загрузчика. Он позволяет выбрать несколько файлов. При этом, он имеет гибкие настройки, для ограничения типа файлов, установки количества загружаемых файлов, проверяет файл на дубликаты (если такой файл уже выбран) и т.д.

Теперь у нас есть все что необходимо, мы можем начать разработку скрипта ajax загрузки нескольких файлов.

В файле index.php, думаю и так все понятно. Здесь находится, собственно форма загрузки файлов и подключаются библиотека jQuery и все необходимые плагины для работы с ajax. Несколько слов по коду и настройке плагинов:

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

Показывает и убирает анимацию при ajax загрузке файлов на сервер.

Отвечает за отправку файлов на сервер.

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 файл и поместите туда код:

Здесь мы видим практически те же компоненты, что и при простой загрузке файлов на сервер, только: target=»rFrame» – про который мы уже говорили выше; функция onResponse – она получает JSON объект, который мы присылаем из серверной стороны. Также, не забудьте указать multipart/form-data, без которого, форма не будет загружать файлы. Далее, посмотрим на серверный код, файла handler.php:

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

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

Надеюсь, у вас все работает и не выкидывает ошибок. Если вы имеете другие познания, о том, как загрузить файл на сервер с помощью AJAX, просьба, поделиться с другими в комментариях.

Загрузка файлов на сайт: PHP, AJAX, HTML5 и Drag’n’Drop

Скучные формы загрузки — прошлый век. HTML5 дает возможности, чтобы добавить Drag’n’Drop, а AJAX позволяет загружать файлы без обновления страницы.

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

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

Цукерберг рекомендует:  Изучение - Изучение php frameworks

Как создать загрузчик файлов в стиле Ajax

Дата публикации: 2011-08-28

От автора: в этом учебнике при помощи jQuery, Ajax и Php мы создадим простой загрузчик файлов в стиле Ajax. Тот, который вы легко сможете осуществить на своем сайте, дополненный серверной валидацией и валидацией на стороне клиента.

Вступление

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

ajax загрузка нескольких файлов с php формой

Как-то для личных целей мне понадобилось сделать ajax загрузку сразу нескольких файлов. Но хотелось сделать это красиво и удобно.
Для этой задачи я выбрал горячо мной любимый jquery и несколько плагинов к нему.

  • Сам jQuery v1.3.1.
    site: www.jquery.com
  • jQuery Multiple File Upload Plugin v1.31 (fix by me)
    Плагин, позволяющий выбирать несколько файлов для загрузки.
    site: www.fyneworks.com/jquery/multiple-file-upload
  • jQuery Form Plugin v2.18
    Плагин для ajax работы с формами.
    site: www.malsup.com/jquery/form
  • jQuery BlockUI Plugin v2.14
    Красивые сообщения об ошибках.
    site: www.malsup.com/jquery/block

Так же был написан простейший php-скриптик (файл doajaxfileupload.php).

Теперь чуть подробнее обо всём.

Плагин Multiple File Upload позволяет выбирать несколько файлов для загрузки, так же он позволяет ограничивать типы файлов, количество выбираемых файлов, проверяет, выбран ли уже файл и многое другое. Использована последняя версия плагина, однако для нормальной работы с моей php формой были изменены две строчки, они помечены текстом » — replace by spiritzzz «.

Form плагин использовался для ajax отправки файлов на сервер. Очень хороший плагин, ему можно найти много применений, советую заглянуть на офф. сайт.

BlockUI Plugin служит лишь для декоративных целей, выводит красивые сообщения об ошибках плагина Multiple File Upload, его можно и не использовать.

В архиве, ссылку на который можно найти ниже, лежат самые свежие версии этих плагинов, а так же два php файлика — index.php и doajaxfileupload.php.
В index.php собственно и находится html форма, подгружается jQ и все плагины:

$( ‘.MultiFile’ ).MultiFile( <
accept: ‘jpg|gif|bmp|png|rar’ , max:15, STRING: <
remove: ‘удалить’ ,
selected: ‘Выбраны: $file’ ,
denied: ‘Неверный тип файла: $ext!’ ,
duplicate: ‘Этот файл уже выбран:\n$file!’
>>);

* This source code was highlighted with Source Code Highlighter .

— тут указываются разрешённые расширения файлов, максимальное их колличество (15), а так-же идет локализация сообщений об ошибках.

* This source code was highlighted with Source Code Highlighter .


— показывает и прячет картинку анимации при отправке

* This source code was highlighted with Source Code Highlighter .

— отвечает за отправку файлов на сервер

doajaxfileupload.php рассматривать не буду, там всё достаточно просто, а если будут вопросы — пишите в комментариях.

P.S: после загрузки выводится много отладочной информации: ошибки, размер и тип файла и тд. Это легко комментируется в файле doajaxfileupload.php

Скачать настроенную, подточенную всю эту штуку можно тут

UPD. онлайн-пример временно недоступен.

Загрузка файла с помощью ajax и php

Я хочу реализовать загрузку файлов с помощью ajax и php. У меня есть тег ввода формы. Я хочу, чтобы событие onchange входного тега, файл будет загружен на сервер, и я получу путь к файлу в переменной в javascript! Итак, я хочу остаться на одной странице и загрузить файл, получить путь к файлу в переменной javascript.

Любые псевдокоды, примеры или учебники были бы весьма полезны.

Вы можете скачать jQuery файлы из этого URL-адреса и добавить в html тег

Это моя html-разметка:

Это один из способов и как я это сделал. Работа с XHR. Я работаю, пока мы говорим

AJAX и PHP: загрузка файла

Сегодня разберём скрипт для загрузки файла на сервер без перезагрузки страницы через технологию ajax. Данный прием я нашёл на секретном индийском форуме.

Во-первых, необходима библиотека JQuery v. 1.8.1. Так же потребуется библиотека jquery.wallform.js. Все необходимый файлы можно скачать в конце статьи.

Далее, необходимо написать php скрипт, который обрабатывает наш файл. Не забудьте добавить код для проверки безопасности загружаемого файла. В данной статье я его не привожу, потому что данная тема требует отдельной статьи.

ez code

Просто о сложном.

Красивая AJAX форма для загрузки файлов

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

Мы будем использовать плагины jQuery File Upload и jQuery Knob для отображения прогресса загрузки.

Т.к. форма будет иметь возможность загружать файлы двумя способами, она будет работать даже если drag/drop не поддерживается.

Как обычно, начнем с HTML5 разметки:

В теге нашего документа, подключаем шрифты Google Webfonts, а перед закрытием тега — JavaScript библиотеки: jQuery, jQuery Knob и jQuery File Upload.

Главный элемент страницы — форма #upload. Внутри нее элемент #drop (принимает файлы с использованием drag&drop) и список, в котором будут отображаться загружаемые файлы. Разметка, которая будет генерироваться для загруженных файлов:

Элемент input будет спрятан с помощью CSS. Он нужен для инициализации плагина jQuery Knob, который будет рисовать шкалу процесса загрузки файла. Input имеет атрибуты data-*, которые используются для обновления шкалы. Позже, когда мы будет отслеживать прогресс загрузки, мы будем обновлять эти значения для перерисовки шкалы. span будет содержать зеленую галку или красный крест.

jQuery

У посетителя будет 2 способа загрузки файла:

  • Перетащить файл в окно браузера (в IE не работает).
  • Нажатием на кнопку browse. Будет имитировано нажатие на спрятанный input и показано системное окно выбора файлов. Обратите внимание, что input имеет параметр multiple параметр, что позволит выбирать много файлов за один раз.

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

В jQuery File Upload есть собственный интерфейс, но мы используем базовую версию плагина для создания собственного дизайна интерфейса. И чтобы наш интерфейс работал, мы передаем плагину несколько параметров / колбэков:

  • dropZone – этот параметр содержит jQuery селектор, который будет принимать перетаскиваемые файлы. Файлы, брошенные на него, будут добавлены в очередь загрузки.
  • add – функция вызывается при добавлении файла в очередь загрузки. Она будет генерировать разметку для файлов и вызвать метод data.submit() .
  • progress – Эта функция будет вызываться каждые 100ms (можно изменить). Второй аргумент содержит размер файла и количество загруженных байт. Это позволяет отслеживать прогресс и обновлять шкалу.
  • fail – функция вызывается при возникновении ошибки.

В комплект jQuery File Upload входит также и PHP скрипт для обработки файлов на сервере, но мы напишем свой. Процесс загрузки фалов будет происходить также как и при обычной загрузке, поэтому всю информацию о них мы можем получить из глобального массива $_FILES:

Как уже говорилось, файлы будут помещаться в очередь и загружаться друг за другом, поэтому обрабатывать на PHP очень легко.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих