 |
AJAX pагрузка файлов
|
|
|
|
Если у вас есть ссылка на файл, то вы сможете сделать очень удобную вещь: загрузить файл с помощью Ajax. Все это возможно благодаря объекту FormData, которая определен в XMLHttpRequest. Этот объект представляет собой HTML-форму и позволяет добавлять пары ключ-значение, которые будут переданы на сервер с помощью метода append():
| var form = new FormData(); form.append("name", "Николай"); |
Самое замечательное в объекте FormData, что вы можете добавить файл непосредственно к нему, фактически имитируя загрузку файла через HTML-форму. Все, что вам нужно сделать, это добавить в файл ссылки с определенным именем, и браузер сделает все остальное. Для примера:
| // Создаем форму с несколькими значениями var form = new FormData(); form.append("name", "Николай"); form.append("photo", control.files[0]); // отправляем через xhr var xhr = new XMLHttpRequest(); xhr.onload = function() { console.log("Отправка завершена"); }; xhr.open("post", "/entrypoint", true); xhr.send(form); |
Как только объект FormData передается в send (), надлежащие к его содержимому HTTP заголовки устанавливаются автоматически. Вам не нужно беспокоиться об установке правильной кодировки формы при использовании файлов, сервер будет работать с полученными файлами, так как если бы была отправлена обычная HTML форма, читая данные о присланном файле из $_FILES['photo'] и текстовыt данных из $_POST['name']. Это дает вам универсальность, чтобы написать код обработки на стороне сервера, который может легко работать как с традиционными HTML-формами так и с формами присланными через Ajax.
И все это работает на последней версии большинства браузеров, включая Internet Explorer 10. К сожалению Internet Explorer 9 этого пока не поддерживает.
Что дальше
Теперь вы знаете два способа доступа к информации о файле в браузере: через контрол формы и через нативный 'drag and drop'. Вероятно, появятся и другие способы доступа к файлам в будущем, но сейчас Вам нужно знать только эти два. Конечно, читать информацию о файлах, это только часть проблемы.Следующим шагом будет чтение данных из этих файлов, об этом и напишу во второй части статьи.
|
|
|
Тип FileReader
FileReader имеет одно назначение: чтение данных из файла и сохранение их в переменной JavaScript. API намеренно разработан так, чтобы быть похожим на XMLHttpRequest, так как оба, по сути являются методом загрузки данных из внешних (вне браузера) ресурсов.Чтение осуществляется асинхронно, чтобы не блокировать браузер.
Есть несколько форматов, в которые FileReader может представлять данные из файла, формат должен быть задан, когда файл открывается для чтения. Чтение осуществляется с помощью вызова одного из следующих методов:
readAsText() – возвращает содержимое файла как plain text
readAsBinaryString() – возвращает содержимое файла в виде строки закодированных двоичных данных (устарело – вместо него используйте readAsArrayBuffer())
readAsArrayBuffer() – возвращает содержимое файла как ArrayBuffer (хорошо для двоичных данных, например, изображения)
readAsDataURL() – возвращает содержимое файла как data URL
Каждый из этих методов инициирует чтение файла и похож на метод send () объекта XHR, инициирующий HTTP запрос. Таким образом, вы должны установить обработчик загрузки событие onload, прежде чем начать читать. Результат чтения всегда представлены как event.target.result. Например:
| var reader = new FileReader(); reader.onload = function(event) { var contents = event.target.result; console.log("Содержимое файла: " + contents); }; reader.onerror = function(event) { console.error("Файл не может быть прочитан! код " + event.target.error.code); }; reader.readAsText(file); |
Этот пример просто читает содержимое файла и выводит его в виде обычного текста в консоль. Обработчик события onload вызывается, когда файл успешно прочитан в то время, как OnError вызывается, если файл не был прочитан по каким-то причинам. Объект типа FileReader доступен внутри обработчика события через event.target. В случае успеха чтения данных, в поле result, будет содержимое файла, иначе информацию об ошибках.
|
|
|
Чтение в data URIs
Вы можете использовать тот же код для чтения в data URI. Data URI (иногда называемый data URLs) представляют собой интересный вариант, если вы хотите, например, вывести изображение только, что прочтенное с диска. Вы можете сделать это, используя следующий код:
| var reader = new FileReader(); reader.onload = function(event) { var dataUri = event.target.result, img = document.createElement("img"); img.src = dataUri; document.body.appendChild(img); }; reader.onerror = function(event) { console.error("Файл не может быть прочитан! код " + event.target.error.code); }; reader.readAsDataURL(file); |
Этот код просто вставляет изображение, которое было прочитано с диска на страницу. Поскольку data URI содержит все изображения, оно может быть передано непосредственно в атрибут src тега <img> и отображено на странице. Как альтернативу данному методу, Вы могли бы, загружать изображение и рисовать его на <canvas>:
| var reader = new FileReader(); reader.onload = function(event) { var dataUri = event.target.result, context = document.getElementById("mycanvas").getContext("2d"), img = new Image(); // ждать, пока изображение не будет полностью обработано img.onload = function() { context.drawImage(img, 100, 100); }; img.src = dataUri; }; reader.onerror = function(event) { console.error("Файл не может быть прочитан! код " + event.target.error.code); }; reader.readAsDataURL(file); |
Этот код загружает изображение в новый объект Image, а затем использует его, чтобы сделать изображение на Canvas'е (с указанием ширины и высоты 100).
Data URIs, как правило, используются для этой цели, но может быть использован на любом другом типе файлов. Наиболее распространенный вариант использования для чтения файлов в data URI для отображения содержимого файлов сразу на веб-странице.
|
|
|
