Javascript мультизагрузка файлов
Несомненно, существует огромное количество готовых библиотек на Javascript, позволяющих реализовать такую функциональность в несколько строк кода, однако если Вас по какой-то причине они не устраивают, или Вы хотите понять принципы технологии, эта статья может оказаться полезной для Вас.
В этой статье рассмотрим два способа реализации мультиаплоадинга, без перезагрузки страницы. Один из них достаточно кроссбраузерный (ie8+), второй основан на более современных технологиях, реализованных не во всех браузерах (File API), однако дающих некоторые преимущества
Аплоадим через iframe
Довольно простой для реализации способ, имеющий один неприятный недостаток:
При загрузке нескольких файлов, они будут грузиться как одно целое (при ограничивающих настройках сервера может обернуться неприятным геморроем)
Суть этого способа состоит в использовании скрытого iframe, и свойства формы target, позволяющего отправлять данные в фреймы.
Попробуем создать простой iframe загрузчик.
Скрипт upload_test.php - просто распечатывает массив пришедших файлов:
<?php
// если пришли файлы - распечатываем и завершаем работу
if(!empty($_FILES)) {
print_r($_FILES);
die;
}
?>
Файл test_iframe.html - содержит элементарную верстку:
<!Doctype html>
<html>
<head>
<title>test iframe upload!</title>
<script type="text/javascript" src="js/iframe_upload_test.js"></script></span></span>
</head>
<body>
<div>
<input type="file" id="file" name="test-file">
<input type="button" id="send" value="send via iframe!">
</div>
<iframe id="iframe23" name="iframe"></iframe>
</body>
</html>
Скрипт iframe_upload_test.js - самое интересное:
// дожидаемся окончания загрузки страницы
window.onload = function() {
// подвязываем переменные к элементам
var $send_btn = document.getElementById('send'),
$input = document.getElementById('file'),
$iframe = document.getElementById('iframe23'),
form = document.createElement('form'); // здесь создается динамическая форма
document.body.appendChild(form);
// настраиваем форму
form.target = $iframe.name;
form.action = 'upload_test.php';
form.method = 'POST';
form.enctype = 'multipart/form-data';
// вешаем обработчик событий на кнопку отправки
$send_btn.addEventListener('click', function(e) {
e.preventDefault();
// сохраняем соседние и родительские элементы, чтобы потом можно было вернуть файловый инпут
var sibling = $input.nextSibling,
parent = $input.parentNode;
// переносим файловый инпут в форму
form.appendChild($input);
// отправляем форму
form.submit();
// очищаем инпут
$input.value = '';
// возвращаем инпут на прежнее место
if(sibling)
parent.insertBefore($input, sibling);
else
parent.appendChild($input);
});
// вешаем обработчик события onload на iframe
$iframe.addEventListener('load', function(e) {
// получаем содержимое с которым можно делать все что угодно
var server_data = $iframe.contentWindow.document.body.innerHTML;
});
}
Таким образом можно загружать файлы без перезагрузки страницы, и сразу же выводить их пользователю. Для реализации мультизагрузки, достаточно дополнить атрибут name у файлового инпута квадратными скобками ("test-name[]") и выставить аттрибут multiple:
<input type="file" id="file" name="test-file[]" multiple>
Аплоадим через HTML5 File api
Аплоадинг через iframe, это конечно хорошо, однако на данный момент существует гораздо более совершенный способ аплоадинга, заключающийся в использовании новых api пришедших вместе с html5.
Поддержка браузерами этой технологии уже сейчас довольно приличная, поэтому метод с iframe пригодится только в случае поддержки пользователей со старыми браузерами. Принцип состоит в использовании объектов типа FormData, представляющих данные формы, и обычных ajax запросов посредством объектов XMLHttpRequest.
Использование HTML5 File api дает нам весомые преимущества, например, теперь можно легко отслеживать процесс загрузки файла с помощью обработчика события onprogress или вывести список файлов с превью перед загрузкой на сервер, а комбинируя возможности Canvas и File API (например, для масштабирования и наложения цветовых фильтров прямо в браузере клиента), можно добиться очень впечатляющих эффектов.
Рассмотрим тестовый пример (html5_upload_test.js):
function success(data) {
// делаем с ответом сервера что душе угодно,
// например распечатаем его в консоль
document.getElementById('result').innerHTML = data;
}
function error(status) {
// показываем код ошибки
alert('Error: ' + status);
}
window.onload = function() {
// подвязываем переменные к элементам
var $send_btn = document.getElementById('send'),
$input = document.getElementById('file');
$send_btn.addEventListener('click', function(e) {
e.preventDefault();
// проверяем массив файлов в файловом инпуте
if($input.files.length > 0) {
for(var i = 0; i < $input.files.length; i++) {
var formData = new FormData(),
file = $input.files[i],
xhr = new XMLHttpRequest();
// заполняем объект FormData (данные формы)
formData.append($input.name, file);
// готовим ajax запрос
xhr.open('POST', 'upload_test.php');
xhr.setRequestHeader('X-FILE-NAME', file.name);
xhr.onreadystatechange = function(e) {
if(e.target.readyState == 4) {
if(e.target.status == 200) {
// успешно отправили файл
success(e.target.responseText);
return;
}
else {
// произошла ошибка
error(e.status);
}
}
};
xhr.send(formData);
}
}
});
}
Функции success и error - это обработчики ответа сервера соответственно. Вся магия начинается тут
// проверяем массив файлов в файловом инпуте
if($input.files.length > 0) {
Массив files файлового инпута содержит массив файлов, выбранных пользователем для загрузки (объекты типа File), для упаковки файлов в запрос потребуется использовать объекты типа FormData, а также объект XMLHttpRequest для отправки данных на сервер:
for(var i = 0; i < $input.files.length; i++) {
var formData = new FormData(),
file = $input.files[i],
xhr = new XMLHttpRequest();
Вызовом метода append(name, data) мы добавляем элемент к данным формы:
formData.append($input.name, file);
После чего настраиваем объект XMLHttpRequest, для отправки POST запроса к php скрипту upload_test.php:
// готовим ajax запрос
xhr.open('POST', 'upload_test.php');
xhr.setRequestHeader('X-FILE-NAME', file.name);
Для обработки результатов запроса используем обрабтку события onreadystatechange:
xhr.onreadystatechange = function(e) {
if(e.target.readyState == 4) {
if(e.target.status == 200) {
// успешно отправили файл
success(e.target.responseText);
return;
}
else {
// произошла ошибка
error(e.status);
}
}
}
При успешно выполненном запросе (status == 200) вызываем обработчик success, и передаем в него ответ сервера в виде простого текста (e.target.responseText), в обратном случае вызываем обработчик error.
На этой стадии объект XMLHttpRequest полностью сформирован, осталось только отправить запрос и передать объект FormData:
xhr.send(formData);
Таким образом, все выбранные пользователем файлы поочередно отправляются на сервер посредством AJAX запросов.
