一、背景需求

1、本地圖片預(yù)覽
2、上傳某些特殊的圖片，后端不存文件，存字符串

二、利用FileReader對象的readAsDataURL()

readAsDataURL 方法會讀取指定的 Blob 或 File 對象。讀取操作完成的時候，readyState 會變成已完成DONE，并觸發(fā) loadend 事件，同時 result 屬性將包含一個data:URL格式的字符串（base64編碼）以表示所讀取文件的內(nèi)容。

三、本地image文件預(yù)覽實例

<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` 符合我們要求的擴(kuò)展名
    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);
  }

}

參考文獻(xiàn) MDN-FileReader