input="file"实现图片的预览缩略图

过程

1.通过input标签的的file属性，选择本地的图片文件，并监听onchange事件。
2.创建img标签，添加到本地DOM中。
3.通过FileReader对象监听图片加载的onload事件。
4.readAsDataURL方法将File对象转换成data:URL格式的字符串（base64编码）并赋值给img标签的src属性。

代码示例

function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /^image\//;
    
    if (!imageType.test(file.type)) {
      continue;
    }
    
    var img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    preview.appendChild(img); // 假设"preview"就是用来显示内容的div
    
    var reader = new FileReader();
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(file);
  }
} 

参考文章

MDN官方链接参考