<div>
	<div>
		Select an image file:
		<input type="file" id="fileInput" multiple>
	</div>
	<div id="files"></div>
</div>

<script>
	const $add = (p, type, text) => {
		const t = document.createTextNode(text);
		const e = document.createElement(type);
		e.appendChild(t);
		p.appendChild(e);
	};
	window.addEventListener('load', () => {
		const fileInput = document.getElementById('fileInput');
		const fileBox = document.getElementById('files');
		fileInput.addEventListener('change', function(e) {
			const files = Array.from(fileInput.files);
			files.forEach((file) => {
				const imageType = /image.*/;
				if (file.type.match(imageType)) {
					const reader = new FileReader();
					reader.addEventListener('load', () => {
						const img = new Image();
						img.src = reader.result;
						$add(fileBox, 'div', `[${file.name} ${file.size} ${file.type} ${file.lastModified}]`);
						fileBox.appendChild(img);
					});
					reader.readAsDataURL(file);
				} else {
					$add(fileBox, 'div', `[${file.name} ${file.size} ${file.type} ${file.lastModified}]`);
					$add(fileBox, 'div', "Displaying file not supported!");
				}
			});
		});
	});
</script>