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

Этот сценарий 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>.

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