Как загружать любые файлы, например, картинки на сервер с помощью AJAX и jQuery? Делается это довольно просто! И ниже мы все обстоятельно разберем.
В те «древние» времена, когда еще не было jQuery, а может он был, но браузеры были не так наворочены, загрузка файла на сайт с помощью AJAX была делом муторным: через всякие костыли вроде iframe. Я те время не застал, да и кому это теперь интересно. А интересно теперь другое — что сохранение файлов на сайт делается очень просто. Даже не обладающий опытом и пониманием, того как работает AJAX, вебмастер, сможет быстро разобраться что-куда. А эта статья ему в помощь. Если подкрепить эти возможности функциями WordPress, то безопасная обработка и загрузка файлов на сервер становится совсем плевым и даже интересным делом (пример с WordPress смотрите в конце статьи).
Однако, как бы все просто не было, нужно заметить, что минимальный опыт работы с файлами и базовые знания в Javascript, jQuery и PHP все же необходимы! Минимум, нужно представлять как загружаются файлы на сервер, как в общих чертах работает AJAX и хоть немного надо уметь читать и понимать код.
Описанный ниже метод довольно стабилен, и по сути опирается на Javascript объект new FormData() , базовая поддержка которого есть во всех браузерах.
Для более понятного восприятия материала, он разделен на шаги. На этом все, полетели.
AJAX Загрузка файлов: общий пример
Начинается все с наличия на сайте input поля типа file . Нет необходимости, чтобы это поле было частью формы (тега
Пример загрузки изображений через AJAX с помощью плагина jQuery Form Plugin.
Как работает:
- На поле выбора файла с повешено jquery событие change .
- При выборе файла срабатывает событие и выполняется метод плагина ajaxSubmit , он все поля из формы с включая выбранный файл отправляет на uploads.php.
- Далее то что отдаст uploads.php выведется в
Загрузка одного файла
Код обработчика upload_ajax.php
Пример загрузки файла
Загрузка нескольких файлов
К input file нужно добавить атрибут multiple и дописать к названию – [] .
Пример того как осуществить загрузку файла через PHP и jQuery ajax.
Для начала необходимо создать HTML элемент для загрузки файла.
Далее необходимо дописать JS код:
Теперь приступим к PHP скрипту, где загрузим файл на сервер.
Несколько слов о каталоге, в который загружается файл:
- Убедитесь, что путь к каталогу верен
- Каталог должен быть доступен для записи.
Пару слов о PHP функции move_uploaded_file, которая используется в upload.php:
$_FILES[‘file’][‘name’] — изначальное имя файла. Можете задать своё название:
Также стоит убедиться что в конфигурационных настройках PHP, значения upload_max_filesize и post_max_size соответствуют вашим требованиям.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php
Перевел: Станислав Протасевич
Урок создан: 24 Мая 2017
Просмотров: 41103
Правила перепечатки
5 последних уроков рубрики "jQuery"
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
Stimed — стили в зависимости от времени суток
Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.