This code allows you make preview-pictures for input without uploading this pictures on server. Detail info on english
Этот код позволяет вам использовать превью-картнки для input file на сайте ещё до их загрузки на сервер. Используется HTML5 FileApi. Подробная информация на русском
| //Превью загрузки фото | |
| 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") | |
| } |