Отправка файла с использованием AJAX.

Содержание

Ajax-запрос к серверу через jQuery

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

Запрос html-данных с помощью функции Load

Это самый простой ajax-запрос через jQuery с получением html-данных и их вставкой в dom-элемент с (содержимое элемента заменяется):

Более продвинутый вариант использования load:

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

Ajax-запросы функциями GET и POST

Эти функции осуществляют отправку ajax запроса http-методами get и post. Приведу пару примеров их использования.

Передача данных не обязательна, как и выполнение каких-либо действий после получения ответа от сервера, т.е. в этом случае, строчки 3 и 4-6 можно удалить при необходимости и таким образом еще сократить код.

Тип получаемых от сервера данных можно указать, добавив dataType (см.ниже) — по-умолчанию определяется автоматически.

Использование post аналогично, но в следующем примере использую вызов функции после получения ответа от сервера.

На самом деле, функции get и post являются сокращенными вариантами функции ajax, которую рассмотрю ниже.

Получение json-данных с помощью getJSON

getJSON — укороченный вариант ajax-запроса методом GET и получением данных в виде json. Способ удобен, например, для получения какого-то массива с данными и последующей работы с ним.

На стороне сервера программа формирует массив и преобразовывает его в json-строку, например, так:

Точно так же можно передать с сервера и объекты stdClass, преобразовав их в json-строку.

Простой ajax-запрос через jQuery с помощью функции AJAX

Теперь приведу пример простого get запроса функцией ajax и получением html-данных.

Запрос к серверу происходит get-методом, т.к. параметр, отвечающий за тип запроса, type по-умолчанию равен GET.

Более сложный пример ajax-запроса через jQuery

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

Кнопка отправки данных:

В приведенном примере при нажатии на кнопку button, сначала меняется состояние кнопки (текст на ней меняется на «Отправка. » и она становится не активной), что делается при помощи параметра beforeSend. Затем происходит отправка запроса с передачей нужных данных. После того, как получен ответ от сервера состояние кнопки возвращается в прежнее (текст меняется на «Отправить», становится активной). Ответ получается в виде json-данных.

Коротко опишу параметры отправки ajax-запроса, которые чаще всего могут пригодиться:

url	Адрес отправки ajax-запроса
type	Способ отправки запроса GET или POST
data	Отправляемые серверу данные. Может быть строка с параметрами и их значениями в формате par1=val1&par2=val2&. объект jQuery, например, $(‘input[type=»text»]’) или другие данные.
dataType	Тип получаемых от сервера данных. Может быть html, json, text, script и xml.
cache	Кэширование браузером запроса (false — не кэшировать).
async	Асинхронное выполнение запроса, т.е. программа продолжает выполняться не дожидаясь ответа сервера. Если указать false, то запрос будет выполнен синхронно, при этом страница не будет ни на что реагировать, пока не будет получен ответ от сервера.
processData	Преобразование отправляемых данных в url-формат. Если нужно чтобы данные не преобразовывались, установить в false. Например, при отправке изображения на сервер или xml-данных.
contentType	Тип передаваемых данных, по умолчанию «application/x-www-form-urlencoded; charset=UTF-8». Если указать false, то в заголовке не будет передаваться тип, что может быть необходимо, например, при отправке изображения на сервер.
beforeSend	Функция, выполняемая перед отправкой ajax-запроса.
complete	Функция, выполняемая после получения ответа от сервера (любого, успешного или нет).
success	Функция, выполняемая при удачном выполнении запроса.
error	Функция, выполняемая в случае ошибки.

Ниже приведу еще несколько примеров использования ajax-запросов.

Отправка формы со всеми данными ajax-запросом через jQuery

Примерный код html-формы:

Для того чтобы страница не перезагружалась при нажатии на кнопку «submit», сначала отменяем стандартые действия браузера использовав e.preventDefaults() .

В параметре data мы передаем все поля формы использовав $(this).serialize() — эта функция преобразует все input-ы и select-ы в строку, пригодную для отправки на сервер.

Так же, здесь использован параметр async: false , чтобы пока форма не отправится на сервер больше ничего нельзя было нажать или сделать.

Отправка изображения или файла ajax-запросом через jQuery

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

html-код будет такой:

Суть идеи в том, что поверх кнопки выводится стандартный input для выбора файла, но он полностью прозрачен и имеет такие же размеры как кнопка. Таким образом, пользователь видит кнопку button, но когда наводит на нее курсор, фактически наводит на input. Соответственно, когда он нажимает на кнопку, на самом деле нажимается input выбора файла. Для того, чтобы не мигал курсор после выбора файла, размер шрифта задан 0px.

Теперь javascript код отправки файла на сервер с отображением прогресса:

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

Пример серверной части на php (по просьбе Евгения):

Информация о загруженном изображении будет содержаться в $_FILES[‘upload’] , т.к. скриптом файл добавлялся так: form.append(‘upload’, files[0]); Соответственно, всё что требуется от php-программы — это проверить что файл соответствует ожидаемым параметрам, перенести файл в нужную папку (в примере в папку files) под нужным именем (в примере newname_image) и вернуть в браузер ответ, который в моем примере просто выводится пользователю командой alert(message);

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

Отправка файла на сервер. AJAX. Чистый js

23.07.2014, 02:19

Отправка данных на сервер ajax
Всем привет) Нужна помощь очень срочно. Делаю лендинг и у него есть несколько форм. Написал скрипт.

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

AJAX: отправка файла на сервер
Пытаюсь отправить файл на сервер. С помощью обычной формы удаётся. С помощью jQuery — никак. Вот.

Ajax запрос отправка данных(json) на сервер и data=type init!?
Как в этот ajax запрос вставить данные, у меня тут указано data: «type = init», но мне нужно еще.

Отправка файла через ajax
$(document).on(‘submit’,’#ajaxForm form’,function(ev)< .

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

В этой статье я покажу, как добавить на сайт функционал для загрузки файлов с помощью jQuery, AJAX и MySQL.

Базовые настройки

Теперь займемся написанием скрипта для загрузки файлов.

СозданиеPHP-скрипта загрузки файлов

Создайте HTML-форму загрузки на основе Bootstrap.
Создайте Ajax-скрипты для загрузки файлов.
Примените проверку безопасности.
Создайте PHP-скрипты для обработки данных.

Создание HTML-формы

HTML-форма — это интерфейс, через который пользователь передает данные серверу. Чтобы форма работала с файлами, нужно установить для элемента

Форум

Справочник

Поиск по форуму

Расширенный поиск

К странице.

gordon freeman (блог) , 22 ноя 2011 — 11:30

отпрвка файла

AJAX отправка файла. Как отправить файл с помощью Ajax? Как отправить файл на javascript?

Как отправить файл на сервер через Ajax?
Как отправить файлы через скрытый фрейм iframe?

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

Как видите в форме нет кнопки Отправить.
У формы обязательно должен быть .

Отлично, все готово.
Теперь осталось только отправить файл.

Для отправки файла подключите к своему сайту перед тегом ScriptJava фреймворк, добавив вот такой код:

Теперь нужно прописать код который будет отправлять файл на сервер через Ajax.

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

При нажатии на что либо нужно вызвать функцию которая будет отвечать за отправку файла через Ajax:

Как получать ответ от файла ajax.php

Содержимое файла ajax.php

Как видите все очень просто и отправить файл через javascript на сервер можно

Не работает ответ с сервера. Подозреваю потому что адрес странички с которой отправляется запрос выглядит так . /blog/index.php?action=post

Все прекрасно работает.
Один раз глюкануло, но там я перепуталне правильно форму изобразил.
Делал гесту на scriptjava так вообще летает.

Хорошо, инфа о файле выводится. А где сам копируемый файл?)
В папке с кодом пусто, проверил на пару уровней выше — тоже ничего. Куда же он копируется и копируется ли вообще?
«А был ли мальчик?» (с)

а для этого ты должен после копирования его перенести с помощью php потому как он копируется во временную папку в данном примере и сразу удаляется как заканчивает работу php код
вообще то это считается само собой разумеющимся
и вот тут об этом написано
http://www.php.su/phphttp/?uploads

если не считать того что $_FILES[‘uploadfile’] на самом деле $_FILES[‘upload_file’], то весьма полезная статья. Минус пол часа от жизни -_-

Все понятно.. используйте плагин и будет все работать.

А нет описания решения без плагина, из 10-20 строк кода, что бы все равно работало?

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

Uncaught TypeError: Cannot set property ‘$$’ of null scriptjava.js:32

А можно выложить исходники!

Технология AJAX в свое сути достаточно проста — обрабатываем форму, готовим post или get данные и отправляем серверу.

Посмотрев как передаются файлы обычным методом (), то становится ясно, что файл передается file=(содержимое файла), где file — имя .

Вопрос в том, как подготовить post данные для отправки файла на сервер?

В интернете ходит много рецептов — возьмите эту библиотеку, возьмите ту.

На вашем сайте я почерпнул много полезной информации. Подскажите саму суть отправки файлов — как получить содержимое файла для передачи на сервер?

В том то и дело, что никак не получить. Только отправить через форму. Поэтому плагины и нужны: они создают форму и отправляют её в скрытом режиме (через iframe, например)

А можно ли как-то усовершенствовать плагин, чтобы была возможность с сервера передавать данные на клиент, например о том, что превышен размер файла?

а как кроме файла передать еще-какие-нибудь данные?

а как прочесть json-ответ в onsend:function ()?

Примеры отправки AJAX JQuery

AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.

Полное описание функции AJAX на jquery.com.

GET запрос

Запрос идет на index.php с параметром « text » и значением « Текст » через метод GET.
По сути это то же самое что перейти в браузере по адресу – http://site.com/index.php?text=Текст

В результате запроса index.php вернет строку «Данные приняты – Текст», которая будет выведена в сообщении alert.

Код можно сократить используя функцию $.get

Код файла index.php

GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр – cache: false .

POST запросы

Или сокращенная версия – функция $.post

Код файла index.php

POST запросы ни когда не кэшироваться.

Отправка формы через AJAX

При отправке формы применяется функция serialize() , подробнее на jquery.com.

Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – .

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

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

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

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

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

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

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

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

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

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

Используем атрибут multiple (в нашем случае, позволяет для одного поля input указывать несколько файлов). Добавляем этот атрибут в наше поле и изменяем его имя, добавив квадратные скобки «[]». Это укажет, что мы передаем массив данных из этого поля: Способ хороший, но к сожалению не все браузеры с ним дружат.
Заранее подготовить несколько полей, которым так же можно указать одинаковые имена массивом: Это уже кроссбраузерный вариант, но и он имеет маленькие недостатки при определённых обстоятельствах. К примеру, мы создали два поля, а пользователю необходимо загрузить три и более файлов.
Динамическое добавление полей. Тут мы создаем одно поле и добавляем какую-нибуть кнопку, по нажатию на которую, пользователь сможет добавлять необходимое кол-во дополнительный полей. Каким способом добавлять поля — дело вашего вкуса и фантазии. Можно заранее подготовить код поля в 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

Ниже представлена форма HTML, которую я создал, когда пользователь нажимает на отправку данных формы, отправляется на сервер через AJAX.

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

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

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