Pull to refresh

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

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

Так же был написан простейший 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), а так-же идет локализация сообщений об ошибках.

$("#loading").ajaxStart(function(){({
 ...
});


* This source code was highlighted with Source Code Highlighter.
— показывает и прячет картинку анимации при отправке

$('#uploadForm').ajaxForm({
 ...
});


* This source code was highlighted with Source Code Highlighter.
— отвечает за отправку файлов на сервер

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

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

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

UPD. онлайн-пример временно недоступен.
Tags:
Hubs:
Total votes 56: ↑49 and ↓7+42
Comments55

Articles