Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Предпросмотр картинки перед загрузкой на сервер на 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>


.