<h1>从本地拖拽图片文件到本页面中即可预览图片</h1>
img {
display: block;
max-width: 100%;
}
const preventAndStop = e => { e.stopPropagation(), e.preventDefault() };
const dropzone = document.documentElement;
dropzone.ondragover = dropzone.ondragenter = preventAndStop;
dropzone.addEventListener('drop', e => {
preventAndStop(e);
[e.dataTransfer.files].forEach(v => {
if (/^image\/.+/.test(v.type)) {
const img = new Image();
img.src = URL.createObjectURL(v);
document.body.append(img);
img.onload = e => URL.revokeObjectURL(img.src);
}
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.