Динамическая загрузка файлов — AJAX Upload

В размышлениях об интерактивности задавался мыслью как сделать удобный с точки зрения usability загрузчик файлов.  Плюс подогревал интерес к механизму работы ajax загрузчика в ExtJS. Делая однажды чат и разобравшись в ограничениях браузеров, узнал, что нет возможности отправлять файл по средством объекта xmlhttprequest. Поэтому было непонятно, как ExtJS uploader отправляет файлы, как будто делает это через ajax. Работая над созданием чата, я также ознакомиться с другими ограничениями браузеров, например на количество одновременных запросов к одному домену (ограничены двумя запросами), а также со всевозможными способами обхода этого ограничения. Там же для удобства применялся iframe транспорт, который позволяет отправлять обычные POST запросы через невидимый (0 px на 0 px) iframe. После этого мне сразу стал понятен механизм работы загрузчика файлов в ExtJS.

Решил добавить юзабильности в один из проектов и использовать этот способ для загрузки файлов, благо есть готовый плагин, называющийся AJAX Upload, хотя как я уже писал ajax тут не причем, все реализовано следующим образом:

• Плагин создает невидимый input над элементом, к которому вы привязываете нагрузку. То есть когда вы нажимаете на кнопку, появляется окно со стандартным выбором файла.
• Затем когда вы выбираете файл плагин отправляет форму содержащую input с файлом через iframe.

«Обычно для закачки файлов мы используем file input (<input type=”file” />), его проблематично стилизовать. В современных веб приложениях этот input выглядит устаревшим. Можно конечно использовать для загрузки Flash, но Javascript прекрасно решает эту задачу. Плагин AJAX-Upload позволяет легко загружать несколько файлов без перезагрузки страницы. Он работает во всех браузерах и не требует никаких дополнительных библиотек для работы. К тому же он не затрагивает глобальных namespace‘ов и прекрасно работает вместе с jQuery и Prototype.»

Работать с плагином довольно легко. Достаточно создать любой DOM элемент и привязать к нему плагин. Плагин отправляет файлы в виде обычного POST запроса. Поэтому можно обрабатывать их загрузку на любом серверном языке. На сайте плагина много работающий примеров. В плагине даже реализовано ограничение на расширения загружаемых файлов.

Распространяется плагин свободно под лицензией MIT.