Jquery загрузка файла ajax

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

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

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

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

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

Читайте также:  Braun series 5 5030s

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

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

Пример загрузки изображений через AJAX с помощью плагина jQuery Form Plugin.

Как работает:

  1. На поле выбора файла с повешено jquery событие change .
  2. При выборе файла срабатывает событие и выполняется метод плагина ajaxSubmit , он все поля из формы с включая выбранный файл отправляет на uploads.php.
  3. Далее то что отдаст uploads.php выведется в

Загрузка одного файла

Код обработчика upload_ajax.php

Пример загрузки файла

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

К input file нужно добавить атрибут multiple и дописать к названию – [] .

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Для начала необходимо создать HTML элемент для загрузки файла.

Далее необходимо дописать JS код:

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

Несколько слов о каталоге, в который загружается файл:

  1. Убедитесь, что путь к каталогу верен
  2. Каталог должен быть доступен для записи.

Пару слов о 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 плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Читайте также:  Lenovo bios не видит флешку

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

Stimed — стили в зависимости от времени суток

Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.