<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>
153500cookie-checkHtml paste clipboard image example