[JS] Input file preview without load on server / input file превью без загрузки картинки на сервер

README.md

English

Working example on JSFIDDLE

Description

This code allows you make preview-pictures for input without uploading this pictures on server. Detail info on english

Русский

Рабочий пример на JSFIDDLE

Описание

Этот код позволяет вам использовать превью-картнки для input file на сайте ещё до их загрузки на сервер. Используется HTML5 FileApi. Подробная информация на русском

input-preview.js

//Превью загрузки фото
        function onFileSelect(e) {
            var
                f = e.target.files[0], // Первый выбранный файл
                reader = new FileReader,
                place = e.path[1]; // Сюда покажем картинку
                ;
            reader.readAsDataURL(f);
            reader.onload = function(e) { // Как только картинка загрузится
                place.style.background = "url('"+e.target.result+"') no-repeat";
                place.style.backgroundSize = "contain";
            }
        }
        if(window.File && window.FileReader && window.FileList && window.Blob) {
            document.querySelector("input[type=file]").addEventListener("change", onFileSelect, false);
        } else {
            console.warn( "Ваш браузер не поддерживает FileAPI")
        }