Я решил написать свою библиотеку на чистом js для загрузки файлов на сервер потому, что хотел использовать плагин небольшого по размерам и легко настраиваемого по стилям. Моя библиотека основана на кросс-браузерном обработчике событий от Ильи Кантора event.js .

Я использовал:

  • modernizr.js 3.0 для определения поддержки свойства placeholder в старых браузерах
  • библиотеку Placeholders.js как полифил
  • css фреймворк bootstrap для стилизации формы

Создадим небольшую форму с 2-мя текстовыми полями и одним полем типа file. Html и css код очень простой, и я не буду приводить его здесь. Я немного изменил и расширил библиотеку event.js. Теперь она возвращает, кроме add и remove, которые служат для обработки событий, еще 2 функции: checkReg для проверки полей и sendData для отправки данных. Я поясню работу последней функции. Прежде всего я проверяю, поддерживает ли браузер FormData.

if (window.FormData === undefined)

Если нет, то создаем скрытый iframe и присваиваем атрибуты action и target для существующей формы. Затем выводим сообщение, что идет загрузка. Далее, навешиваем обработчик load на наш iframe и ждем отправки данных на сервер. Эту схему действий можно встретить в интернете. Но там нет главного – ожидания ответа от сервера. То есть подразумевается, что ответ приходит мгновенно, что конечно не так. Я поставил проверку строки ответа на его длину.

if(content.length > 0)

Если ответ есть, тогда завершаем работу функции eventHandler и передаем ответ другой функции callback, удаляем событие load для iframe и удаляем его самого. Если ответа еще нет, ставим рекурсивный вызов функции eventHandler через 1 секунду. Далее обрабатываем ответ уже в файле script.js.

В новых браузерах есть индикация загрузки данных с помощью progress bar от bootstrap.

Сссылка библиотеки на github ajaxFileLoad.

Протестировал в браузерах IE8+, Opera 10+, новые firefox и chrome — все работает.