Такая возможность может понадобится, если нам нужно использовать выбранное, но еще не загруженное на сервер, изображение. К примеру: мы ходим динамически создать превью подгружаемой фото, или отобразить картинку на канве для дальнейшей обработки.
Проблема заключается в том, что браузеры, в целях безопасности, не сообщают путь к выбранному локальному файлу (за исключением IE6 :) ). Тем не менее, предусмотрен функционал, позволяющий получить содержимое файла в формате base64 (Пока что реализовано только в FireFox). Учитывая то, что в современных браузерах элемент <IMG /> прекрасно понимает этот формат, то наша задача может быть легко реализована.
Допустим, у нас есть html-код, содержащий поле для ввода файла с идентификатором «uploaded_image», и пустое изображение и идентификатором «preview_image»:
Превью:
<img id="preview_image" src="#" alt="image preview" />
<br />
Выберите файл:
<input type="file" id="uploaded_image" name="uploaded_image" />
тогда наш код на JavaScript будет выглядеть так:
// получаем поле для выбора файлов
var upload_field = document.getElementById("uploaded_image");
// навешиваем обработчик, который выполнится, когда файл будет выбран
upload_field.onchange = function() {
// получаем элемент <IMG />, предназначенный для превью
var preview_image = document.getElementById("preview_image");
// присваиваем ему источник изображения
if("files" in upload_field && "getAsDataURL" in upload_field.files[0]) {
preview_image.src = upload_field.files[0].getAsDataURL();
} else {
alert("К сожалению, Ваш браузер не поддерживает метод 'getAsDataURL'");
}
}
Вот и всё. Весь фокус заключается в методе getAsDataURL(), возвращающем base64 выбранного изображения.
К сожалению, на сегодняшний день этот метод работает только в Firefox.
«К сожалению, Ваш браузер не поддерживает метод ‘getAsDataURL'»