Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Предпросмотр картинки перед загрузкой на сервер на JavaScript
Как сделать предпросмотр картинки перед загрузкой на сервер на Javascript.
Исходный код этого примера:
<style>
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>
<input type="file" id="files" name="files[]" multiple>
<output id="list"></output>
<script type="text/javascript">
function handleFileSelect(evt) {
var files = evt.target.files; // объект FileList
// Прокручиваем FileList и визуализируем файлы изображений в виде миниатюр
for (var i = 0, f; f = files[i]; i++) {
// Обрабатываем только файлы изображений
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Ставим обработчик загрузки файла для вывода информации о файле
reader.onload = (function(theFile) {
return function(e) {
// Отрисовка миниатюры
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', theFile.name, '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Читаем файл изображения как URL-адрес данных
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
.
Прокомментировать/Отблагодарить