Как открывать перетащенные файлы с помощю HTML5

30-12-2011

В предыдущей статье было расказанно, как использовать HTML5 File API, как получать информацию о перетащенных файлах. Сегодня попытаемся загружать фалы со стороны клента, то есть выводить их, если это допустим картинка.

Зачем открывать локальные файлы через JavaScript?

Загрузка файлов через обычные HTML формы очень неудобна. Люди часто используют его допустим при передаче нескольких мегобайт фотографий со своей камеры на сервер. Если предположить что они знают местоположение фотографий, то загрузка может занять несколько минут, но это только если все будет хорошо и форматы и разамеры будут подходящими, а что если нет? До сих пор разработчикам приходилось пологаться на Flash или другие плагины для обеспечение удобства. Предварительная обработка с помощю Javascripta имеет ряд преимуществ:

  • Локальная обработка файлов происходит на много быстрей.
  • Файлы могут быть проанализированны, чтобы убедиться, что они в правильном формате и ниже, орпеделенного размера.
  • Такие файлы как картинки могут быть просмотренны перед загрузкой.
  • Можно обрезать или изменить размер изображения перед загрузкой с помощю canvas.

Объект FileReader.

FileReader является частью W3C File API и предостовляет четыре метода для асинхронной загрузки данных из ссылки к объекту File.

  • .readAsText(File f, [кодировка]) считывает файл как строку. По умолчанию в кодировке UTF-8, но можно передать и другой формат.
  • .readAsDataURL(File f) как закодированный URL.
  • .readAsBinaryString(File f) как двоичный код.
  • .readAsArrayBuffer(File f) как объект ArrayBuffer.

В следующем коде будем использовать превые два метода для загрузки и отображения текста и картинок.

Асинхронное открытие файлов с помощю Javascipt.

Вот наша исхлдная функция ParseFile() в который предаются выбранные или перетащенные на элемент #filedrag файлы.

function ParseFile(file) {

	Output(
		"<p>Информация о файле: <strong>" + file.name +
		"</strong> тип: <strong>" + file.type +
		"</strong> размер: <strong>" + file.size +
		"</strong> байт</p>"
	);

}

После обновления статуса, мы проверяем является ли переданный файл текстовым (text/plain, text/html, text/css, и т.д.), загружаем его используя метод FileReader.readAsText() и выводим результат:

// выводим текст
if (file.type.indexOf("text") == 0) {
	var reader = new FileReader();
	reader.onload = function(e) {
		Output(
			"<p><strong>" + file.name + ":</strong></p><pre>" +
			e.target.result.replace(/</g, "<").replace(/>/g, ">") +
			"</pre>"
		);
	}
	reader.readAsText(file);
}

Точно также мы можем проверить, если у нас файл является картинкой (image/jpeg, image/gif, image/png и т.д.) загрузить его как data URL используя метод FileReader.readAsDataURL() и передать это все дело как src атрибут для элемента img:

// выводим картинку
if (file.type.indexOf("image") == 0) {
	var reader = new FileReader();
	reader.onload = function(e) {
		Output(
			"<p><strong>" + file.name + ":</strong><br />" +
			'<img src="' + e.target.result + '" /></p>'
		);
	}
	reader.readAsDataURL(file);
}

Продажа фирм

Костя7.22.2012 02:07
Классно, давно искал такую фишку, да и заметил, что популярные сайты стали такую фишульку использовать, спасибо, довольно хорошие материалы на сайте!)
failbowl10.28.2012 02:10
<> очепятка
failbowl10.28.2012 02:10
Вот наша исхлдная функция ParseFile() ------------ очепятка
ОСТАВИТЬ КОММЕНТАРИЙ