Skip to content

Instantly share code, notes, and snippets.

@Itachi261092
Created January 28, 2016 14:24
Show Gist options
  • Save Itachi261092/f7877af5e571f5a7a02c to your computer and use it in GitHub Desktop.
Save Itachi261092/f7877af5e571f5a7a02c to your computer and use it in GitHub Desktop.
[JS] Input file preview without load on server / input file превью без загрузки картинки на сервер

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. Подробная информация на русском

//Превью загрузки фото
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")
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment