FileReader.readAsDataURL()函數的使用【轉】

readAsDataURL 方法會讀取指定的 Blob或 File對象。讀取操作完成的時候，readyState會變成已完成DONE，並觸發 [loadend](https://developer.mozilla.org/zh-CN/docs/Web/Reference/Events/loadend "/zh-CN/docs/Web/Reference/Events/loadend")事件，同時 result屬性將包含一個data:URL格式的字符串（base64編碼）以表示所讀取文件的內容。

語法

instanceOfFileReader.readAsDataURL(blob);

參數

blob

即將被讀取的Blob或 File對象。

示例

HTML

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

JavaScript

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

讀取多個文件的例子

HTML

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

JavaScript

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

}

注意: Internet Explorer  10 之前的版本並不支持  FileReader()。關於圖片文件預覽的兼容性解決方案，可以查看 crossbrowser possible solution for image preview 或者 this more powerful example 。

文章來自：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL