Плагин для библиотеки 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. Несколько слов по коду и настройке плагинов:
$('.MultiFile').MultiFile({ accept:'jpg|gif|bmp|png|rar', max:15, STRING: { remove:'удалить', selected:'Выбраны: $file', denied:'Неверный тип файла: $ext!', duplicate:'Этот файл уже выбран:\n$file!' }});
Указываете расширения файлов допускаемых к загрузке, указываете максимальное количество загружаемых файлов.
$("#loading").ajaxStart(function(){({ ... });
Показывает и убирает анимацию при ajax загрузке файлов на сервер.
$('#uploadForm').ajaxForm({ ... });
Отвечает за отправку файлов на сервер.
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, просьба, поделиться с другими в комментариях.
