上传图片预览实现方案分析

一般有两种方式：
1、window.URL.createObjectURL(file)
2、new FileReader().readAsDataURL(file)

二者对比：

1、返回值
FileReader.readAsDataURL(file)可以得到一段 base64的字符串。
URL.createObjectURL(file)可以得到当前文件的一个 内存URL。

2、内存使用
FileReader.readAsDataURL(file)的返回值是转化后的超长 base64字符串(长度与要解析的文件大小正相关)。
URL.createObjectURL(file)的返回值虽然是字符串，但是是一个 url地址。

3、内存清理
FileReader.readAsDataURL(file)依照JS垃圾回收机制自动从内存中清理。
URL.createObjectURL(file)存在于当前 doucment内，清除方式只有 unload()事件或 revokeObjectURL()手动清除 。

4、执行机制
FileReader.readAsDataURL(file)通过回调的形式返回，异步执行。
URL.createObjectURL(file)直接返回，同步执行。

5、兼容性
兼容性兼容 IE10以上，其他浏览器均支持。

6、其他
FileReader.readAsDataURL(file)当多个文件同时处理时，需要每一个文件对应一个新的 FileReader对象。
URL.createObjectURL(file)依次返回无影响。

7、移动端个别系统如OPPO安卓4.3预览无效。
使用FileReader.readAsDataURL(file)，在OPPO安卓4.3上预览不成功。原因是生成的base64编码中无image/png等图片类型。
解决方案：换成使用URL.createObjectURL(file)或在base64前手动添加图片类型解决。
案例见：https://www.cnblogs.com/saysmy/p/5626337.html

8、使用
FileReader.readAsDataURL(file)：

<input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div>

function previewFiles() {

  var preview = document.querySelector('#preview');
  var files   = document.querySelector('input[type=file]').files;

  function readAndPreview(file) {

    // 确保 `file.name` 符合我们要求的扩展名
    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
      var reader = new FileReader();

      reader.addEventListener("load", function () {
        var image = new Image();
        image.height = 100;
        image.title = file.name;
        image.src = this.result;
        preview.appendChild( image );
      }, false);

      reader.readAsDataURL(file);
    }

  }

  if (files) {
    [].forEach.call(files, readAndPreview);
  }

}

URL.createObjectURL(file)：

https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL#示例