Предварительный просмотр изображения перед загрузкой
Я хочу иметь возможность предварительно просматривать файл (изображение) перед его загрузкой. Действие предварительного просмотра должно выполняться полностью в браузере без использования Ajax для загрузки изображения.
Как я могу это реализовать?
4 ответ(ов)
Вы можете использовать следующий код для отображения изображения "Нет предварительного просмотра", если загружается не изображение:
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
. Убедитесь, что путь к вашему изображению без предварительного просмотра корректен.
Вот версия для нескольких файлов, основанная на ответе Ивана Баева.
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.
Вопрос:
Как превьюировать несколько файлов и один файл с помощью одной функции на чистом 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>
.
Таким образом, вы можете превьюировать как одно, так и несколько изображений с помощью одной и той же функции.
Способ 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
, которая читает файл и обновляет источник изображения. Не забудьте учитывать, что необходимо предоставлять пользователю информацию о допустимых типах загружаемых файлов для лучшего пользовательского опыта!
Как перенаправить на другую веб-страницу?
Прокрутка к элементу с использованием jQuery
jQuery: Получение Выбранного Значения Из Выпадающего Списка
Как проверить радио-кнопку с помощью jQuery?
Существует ли ссылка на "последнюю" библиотеку jQuery в Google APIs?