Этот сценарий jQuery отображает предварительный просмотр в реальном времени выбранных изображений, выбранных из поля ввода файла.
Учитывая следующую разметку:
<input type="file" id="multiple-files">
<div class="image-preview"></div>
Мы можем применить следующий jQuery для отображения предварительного просмотра выбранных изображений:
var inputLocalFiles = document.getElementById("multiple-files");
inputLocalFiles.addEventListener("change", previewImages, false);
function previewImages() {
$('.image-preview').empty();
var fileList = this.files;
var anyWindow = window.URL || window.webkitURL;
for (var i = 0; i < fileList.length; i++) {
var j = i + 1;
var objectUrl = anyWindow.createObjectURL(fileList[i]);
$('.image-preview').append('<div class="image-preview-' + j + '"><a href="' + objectUrl + '" title="Preview of image #' + j + '"></a></div>');
$('.image-preview-' + j).css({ 'background-image' : 'url(' + objectUrl + ')', 'background-size' : 'cover', 'background-repeat' : 'no-repeat', 'background-position' : 'center center' });
window.URL.revokeObjectURL(fileList[i]);
}
}
Этот сниппет в основном определяет, когда в поле ввода есть выбранные файлы, и если это так, использует их в качестве фоновых изображений для <div>
, добавленных к .image-preview
<div>
.
Редактирование кода не требуется, но разметка, представленная в примере, является довольно базовой, и ее следует дополнить полной структурой формы или тем, что требуется для вашего дизайна.