Html paste clipboard image example

Date: 2018-10-23
<div id="files"></div>

<script>
	const $add = (p, type, text) => {
		const t = document.createTextNode(text);
		const e = document.createElement(type);
		e.appendChild(t);
		p.appendChild(e);
	};
	const listenPaste = (element, targetEl) => {
		element.addEventListener('paste', (event) => {
			const clipboardData = event.clipboardData;
			const files = Array.from(clipboardData.files);
			files.forEach((file, i) => {
				const imageType = /image.*/;
				if (file.type.match(imageType)) {
					const reader = new FileReader();
					reader.addEventListener('load', () => {
						const img = new Image();
						img.src = reader.result;
						$add(targetEl, 'div', `[${file.name} ${file.size} ${file.type} ${file.lastModified}]`);
						targetEl.appendChild(img);
					});
					reader.readAsDataURL(file);
				}
			});
		});
	};
	window.addEventListener('load', () => {
		const fileBox = document.getElementById('files');
		listenPaste(window, fileBox)
	});
</script>

 

15350cookie-checkHtml paste clipboard image example