Предварительный просмотр изображений перед загрузкой

Вот версия на jQuery для вас. Думаю, это самое простое решение.

$(function() {
    // Множественный предварительный просмотр изображений в браузере
    var imagesPreview = function(input, placeToInsertImagePreview) {
        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }
    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" multiple id="gallery-photo-add">
<div class="gallery"></div>

Этот код позволяет загружать несколько изображений и отображать их предварительный просмотр непосредственно в браузере. Пользователь выбирает файлы через <input type="file" multiple>, а затем с помощью FileReader каждый файл читается и добавляется как изображение в заданный контейнер div.gallery.

Вы хотите реализовать предварительный просмотр нескольких изображений, загружаемых через элемент input в HTML? В приведенном вами коде используются две разные реализации на jQuery и чистом JavaScript. Вот объяснение того, как они работают.

Пример на jQuery

В первом примере используется библиотека jQuery для обработки выбора файлов и отображения их как предварительных просмотров изображений:

$(function() {
    var imagesPreview = function(input, placeToInsertImagePreview) {
        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }
    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" multiple id="gallery-photo-add">
<div class="gallery"></div>

В этом коде:

1. Мы создаем функцию imagesPreview, которая принимает два параметра: input (элемент input) и placeToInsertImagePreview (место для вставки изображений).
2. При изменении элемента input (change событие) мы вызываем эту функцию.
3. В цикле мы создаем новый объект FileReader для каждого выбранного файла, который считывает содержимое файла и добавляет его в указанный контейнер (div.gallery) как новое изображение.

Пример на чистом JavaScript

Во втором примере используется чистый JavaScript для выполнения аналогичных действий:

function previewImages() {
    var preview = document.querySelector('#preview');

    if (this.files) {
        [].forEach.call(this.files, readAndPreview);
    }

    function readAndPreview(file) {
        if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
            return alert(file.name + " is not an image");
        }

        var reader = new FileReader();

        reader.addEventListener("load", function() {
            var image = new Image();
            image.height = 100;
            image.title  = file.name;
            image.src    = this.result;
            preview.appendChild(image);
        });

        reader.readAsDataURL(file);
    }
}

document.querySelector('#file-input').addEventListener("change", previewImages);

HTML

<input id="file-input" type="file" multiple>
<div id="preview"></div>

В этой версии:

1. Функция previewImages обрабатывает изменения в элементе input.
2. Мы перебираем все загруженные файлы, проверяем их расширения и создаем новый объект FileReader.
3. После загрузки файла мы создаем элемент Image, устанавливаем его свойства (высота, название, источник) и добавляем его на страницу.

Заключение

Оба подхода позволяют пользователю предварительно просматривать изображения, которые он хочет загрузить. Если вы предпочитаете использовать jQuery, первый пример будет более сжатым и простым. Если вы хотите использовать нативный JavaScript, второй пример прекрасно подойдет. Выбор подхода зависит от ваших предпочтений и требований проекта.

Этот код на JavaScript позволяет загружать и предварительно просматривать изображения, выбранные с помощью элемента <input type="file">. Вот, как он работает:

1. Функция previewImages запускается при изменении значения поля ввода файлов.
2. Внутри этой функции происходит выбор элемента для отображения предварительного просмотра изображений (#preview).
3. Если у полей есть файлы, они обрабатываются с помощью метода forEach, который вызывает внутреннюю функцию readAndPreview для каждого файла.

Внутренняя функция readAndPreview выполняет следующие действия:

• Сначала проверяет, соответствует ли имя файла расширениям изображений (JPEG, PNG, GIF). Если нет, выводится предупреждение, сообщающее о том, что файл не является изображением.
• Если файл подходит по расширению, создается новый экземпляр FileReader.
• После завершения чтения файла с помощью FileReader, создается новый объект Image, устанавливаются его высота и название, а изображение добавляется в разметку превью.

В конце reader.readAsDataURL(file); инициирует процесс чтения файла как URL-данных.

В HTML-коде имеется элемент <input> с идентификатором file-input, который позволяет пользователю выбрать несколько файлов, и <div> с идентификатором preview, куда будут добавлены предварительно просмотренные изображения.

Для подключения обработки события мы используем:

document.querySelector('#file-input').addEventListener("change", previewImages);

Таким образом, при выборе файлов в поле ввода автоматически будут отображены их предварительные просмотренные версии.

Вы написали на JavaScript скрипт для управления загрузкой файлов, который включает в себя очередь загрузки, предварительный просмотр изображений и поддержку перетаскивания файлов. Давайте разберем код по частям и объясним его работу.

Структура скрипта

1. Объект upcontrol:

   • Содержит методы для управления загрузкой загружаемых файлов, а также переменные для отслеживания очереди файлов и текущего загружаемого файла.
   • queue — очередь файлов.
   • now — индекс текущего файла для загрузки.

2. Метод start:

   • Инициализирует процесс загрузки файлы при вызове upcontrol.start(files).
   • Сначала проверяет, пуста ли очередь. Если да, то добавляет файлы и отключает элемент загрузчика до завершения загрузки.
   • Устанавливает обработчик события для кнопки "Добавить файлы", который запускает процесс загрузки.

3. Метод preview:

   • Показывает предварительный просмотр изображений, выбранных для загрузки, создавая элемент <img> для каждого файла и добавляя его в контейнер с идентификатором gallery.

4. Метод run:

   • Выполняет загрузку текущего файла.
   • Создает новый XMLHttpRequest и отправляет файл на сервер.
   • Обрабатывает ответ от сервера и отображает статус загрузки.
   • После завершения загрузки текущего файла, автоматически переходит к следующему файлу в очереди.

5. Обработчики событий:

   • При загрузке страницы устанавливает обработчики событий для области перетаскивания, включая dragenter, dragleave, dragover и drop.
   • При перетаскивании файлов предотвращает стандартное поведение браузера и начинает процесс загрузки.

Пример использования

<div id="uploader">Перетащите файлы сюда или нажмите для загрузки</div>
<div id="gallery"></div>
<div id="upstat"></div>

Этот код создает интерфейс для загрузки, который позволяет пользователю перетаскивать файлы в элемент с идентификатором uploader. После сброса файлов в область загрузки, они будут проанализированы и загружены на сервер с предварительным просмотром каждого изображения.

Заключение

Этот скрипт обеспечивает интерактивный опыт загрузки файлов с возможностью предварительного просмотра и отслеживания статуса загрузки. Вы можете расширить функциональность, добавив дополнительные функции, такие как обработка ошибок, ограничения на типы файлов и размер, или улучшение интерфейса пользователя.

Вот как можно конвертировать файл в URL в формате base64 с помощью подхода ES2017:

// конвертировать файл в URL формата base64
const readURL = file => {
    return new Promise((res, rej) => {
        const reader = new FileReader();
        reader.onload = e => res(e.target.result);
        reader.onerror = e => rej(e);
        reader.readAsDataURL(file);
    });
};

// для демонстрации
const fileInput = document.createElement('input');
fileInput.type = 'file';
const img = document.createElement('img');
img.style.maxWidth = '320px';
document.body.appendChild(fileInput);
document.body.appendChild(img);

const preview = async event => {
    const file = event.target.files[0];
    const url = await readURL(file);
    img.src = url;
};

fileInput.addEventListener('change', preview);

Объяснение кода:

1. Функция readURL создаёт новый Promise, который использует FileReader для чтения файла.
2. Когда файл загружен, происходит вызов onload, и результат (в виде URL в формате base64) передаётся в резолв Promise.
3. Если возникла ошибка, onerror вызовет отклонение Promise.
4. Поле ввода для выбора файла и элемент изображения создаются динамически и добавляются на страницу.
5. Когда пользователь выбирает файл, запускается функция preview, которая вызывает readURL и устанавливает источник изображения на полученный URL.

Этот код позволяет пользователю загружать изображение и отображать его предварительный просмотр на веб-странице.