21

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

10

Я хочу иметь возможность предварительно просматривать файл (изображение) перед его загрузкой. Действие предварительного просмотра должно выполняться полностью в браузере без использования Ajax для загрузки изображения.

Как я могу это реализовать?

4 ответ(ов)

0

Вы можете использовать следующий код для отображения изображения "Нет предварительного просмотра", если загружается не изображение:

function readURL(input) {
    var url = input.value;
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0] && (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('.imagepreview').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    } else {
        $('.imagepreview').attr('src', '/assets/no_preview.png');
    }
}

Этот код сначала проверяет расширение файла, загружаемого пользователем. Если файл является изображением (GIF, PNG, JPEG или JPG), он отображает загруженное изображение. В противном случае он устанавливает изображение "Нет предварительного просмотра" с помощью атрибута src. Убедитесь, что путь к вашему изображению без предварительного просмотра корректен.

0

Вот версия для нескольких файлов, основанная на ответе Ивана Баева.

HTML

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

JavaScript / 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');
    });
});

Для работы кода требуется jQuery версии 1.8 и выше из-за использования функции $.parseHTML, что помогает в предотвращении XSS-уязвимостей.

Этот код будет работать сразу же после подключения, и единственной зависимостью является jQuery.

0

Вопрос:

Как превьюировать несколько файлов и один файл с помощью одной функции на чистом JavaScript, используя переиспользуемый подход?

Ответ:

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

function imagePreviewFunc(inputElement, previewerId) {
    let files = inputElement.files;
    previewerId.innerHTML = ''; // сброс элемента предварительного просмотра изображений

    for (let i = 0; i < files.length; i++) {
        let imgElement = document.createElement("img");
        imgElement.src = URL.createObjectURL(files[i]);
        previewerId.append(imgElement);
    }
}

Для использования этой функции создайте соответствующие HTML элементы:

<input accept="image/*" type='file' id="imageInput_1" onchange="imagePreviewFunc(this, imagePreview_1)" />
<div id="imagePreview_1">Этот блок для предварительного просмотра одного изображения</div>
  
<hr />
  
<input class="form-control" accept="image/*" type='file' id="imageInput_2" multiple="true" onchange="imagePreviewFunc(this, imagePreview_2)" />
<div id="imagePreview_2">Этот блок для предварительного просмотра нескольких изображений</div>

Примечания:

  • imagePreviewFunc принимает два параметра: элемент ввода файлов и элемент для отображения изображений.
  • В функции происходит сброс содержимого элемента для предварительного просмотра перед добавлением новых изображений.
  • Использование URL.createObjectURL позволяет динамически создавать URL-адреса для загруженных файлов, которые можно использовать в атрибуте src элемента <img>.

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

0

Способ 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.attributeStyleMap.set('max-width', '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);

Этот код показывает, как использовать FileReader для конвертации загружаемого файла в URL формата base64 и отображения его в изображении на веб-странице. Когда пользователь выбирает файл, событие change инициирует функцию preview, которая читает файл и обновляет источник изображения. Не забудьте учитывать, что необходимо предоставлять пользователю информацию о допустимых типах загружаемых файлов для лучшего пользовательского опыта!

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