JSFiddle - React, Tailwind, and code Playground

by vace

HTML

<div id="paste">
  请选择拖动文件到这里
</div>
<p id="desc"></p>
<div id="preview"></div>

CSS

body {
   background-color: #fff;
 }
 
 #paste {
   width: 100%;
   background-color: #ccc;
   height: 300px;
   line-height: 300px;
   font-size: 30px;
   border: 2px dashed red;
   text-align: center;
 }
 
 #preview {
   width: 90%;
   margin: 30px auto;
 }
 
 #preview img {
   width: 120px;
   margin: 10px;
 }

JavaScript

var canvas = document.getElementById('paste');
var desc = document.getElementById('desc');
//有些浏览器如果拖入文件会直接新打开一个窗口,需要拦截此事件
canvas.addEventListener('dragover', function(e) {
  e.stopPropagation();
  e.preventDefault();
  return false;
});
canvas.addEventListener('drop', function(e) {
  e.stopPropagation();
  e.preventDefault();
  var files = e.dataTransfer.files;
  desc.innerHTML = '你选择了' + files.length + '个文件,第一个文件' + files[0].name;
  if (!files.length) return alert('没有选择任何文件');
  for (var i = 0, _len = files.length; i < _len; i++) {
    if (['image/png', 'image/jpeg', 'image/gif'].indexOf(files.item(i).type) !== -1) {
      readImage(files.item(i), previewImage); // 等同于 files[i]
    } else {
      desc.innerHTML += '<br>' + files[i].name + '不支持预览';
    }

  }
});


function readImage(file, callback) {
  var reader = new FileReader();
  //监听读取完毕事件
  reader.onload = function(e) {
    callback(reader.result);
  };

  reader.readAsDataURL(file);
}

function previewImage(readerResult) {
  var image = new Image();
  image.src = readerResult;
  document.getElementById('preview').appendChild(image);
}