Показать превью выбранной картинки

Показать превью выбранной картинки можно через объект FileReader, который появился в HTML 5.

<input type="file" id="uploadImage">
<img id="result">
 
<script>
FReader = new FileReader();
 
// событие, когда файл загрузится
FReader.onload = function(e) {
    document.querySelector("#result").src = e.target.result;
};
 
// выполнение функции при выборки файла
document.querySelector("input").addEventListener("change", loadImageFile);
 
// функция выборки файла
function loadImageFile() {
    var file = document.querySelector("input").files[0];
    FReader.readAsDataURL(file);
}
</script>

Данный способ позволяет вывести превью выбранной картинки, не загружая её на сервер.

Пример кода: jsfiddle.net/tbhdN/

Комментарии

Авторизуйтесь, чтобы добавлять комментарии