JSFiddle - React, Tailwind, and code Playground

by vace

HTML

<h1>读取并且预览多张图片</h1>
<input type="file" accept="image/png, image/jpeg" name="upload" multiple>
<div id="preview"></div>

CSS

body{
  backgroud:#fff;
}
#preview {
  width: 90%;
  margin: 30px auto;
}

#preview img {
  width: 120px;
  margin: 10px;
}

JavaScript

var fileEle = document.querySelector('input[name=upload]');
fileEle.addEventListener('change', function(e) {
  //files 为 FileList对象
  var files = e.target.files;
  if (!files.length) return alert('没有选择任何文件');

  for (var i = 0, _len = files.length; i < _len; i++) {
    readImage(files.item(i), previewImage); // 等同于 files[i]
  }

});


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