<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);
    }
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.