簡介

HTML5 終于為我們提供了一種通過 File API 規范與本地文件交互的標準方式。為了舉例說明其功能，可使用 File API 在向服務器發送圖片的過程中創建圖片的縮略圖預覽，或者允許應用程序在用戶離線時保存文件引用。另外，您可以使用客戶端邏輯來驗證上傳內容的 mimetype 與其文件擴展名是否匹配，或者限制上傳內容的大小。

該規范通過“本地”文件系統提供了多種文件訪問接口：

1、File- 獨立文件；提供只讀信息，例如名稱、文件大小、mimetype 和對文件句柄的引用。
2、FileList- File對象的類數組序列（考慮 <input type="file" multiple>
或者從桌面拖動目錄或文件）。
3、Blob- 可將文件分割為字節范圍。

與以上數據結構結合使用時，FileReader
接口可用于通過熟悉的 JavaScript 事件處理來異步讀取文件。因此，可以監控讀取進度、找出錯誤并確定加載何時完成。這些 API 與 XMLHttpRequest 的事件模型有很多相似之處。

請注意：在編寫此教程時，Chrome 瀏覽器 6.0 和 Firefox 3.6 均支持處理本地文件所必需的 API。從 Firefox 3.6.3 起，就不支持 File.slice()方法了。

選擇文件

首先需要檢查您的瀏覽器是否完全支持 File API：

   // Check for the various File API support.
  if (window.File && window.FileReader && window.FileList && window.Blob) { 
   // Great success! All the File APIs are supported.
  } else { 
     alert('The File APIs are not fully supported in this browser.');
  }

當然，如果您的應用程序只會用到這些 API 中的一小部分，請相應地修改此代碼段。

使用表單輸入進行選擇

要加載文件，最直接的方法就是使用標準 <input type="file">元素。JavaScript 會返回選定的 File 對象的列表作為 FileList。以下示例使用“multiple”屬性實現了同時選擇多個文件：

   <input type="file" id="files" name="files[]" multiple /> 
   <output id="list"></output>

  <script> 
   function handleFileSelect(evt) { 
        var files = evt.target.files; // FileList object 

        // files is a FileList of File objects. List some properties.
      var output = []; 
     for (var i = 0, f; f = files[i]; i++) { 
          output.push('<li><strong>', 
             escape(f.name), 
             '</strong> (', 
             f.type || 'n/a', ') - ', 
             f.size, 
            ' bytes, last modified: ',
             f.lastModifiedDate.toLocaleDateString(), '</li>'); 
     } 
     document.getElementById('list').innerHTML = '<ul>' +
     output.join('') + '</ul>'; }   
     document.getElementById('files').
            addEventListener('change', handleFileSelect, false);
 </script>

示例

使用拖放操作進行選擇

另一種加載文件的方法是在本地將文件從桌面拖放到瀏覽器。我們可以對前一個示例稍作修改，加入拖放支持。

<div id="drop_zone">Drop files here</div>
<output id="list"></output>

<script> 
 function handleFileSelect(evt) { 
     evt.stopPropagation(); 
     evt.preventDefault(); 
     var files = evt.dataTransfer.files; // FileList object. 

     // files is a FileList of File objects. List some properties. 
     var output = []; 
     for (var i = 0, f; f = files[i]; i++) { 
         output.push('<li><strong>', 
             escape(f.name), '</strong> (',
             f.type || 'n/a', ') - ', f.size, 
             ' bytes, last modified: ', 
             f.lastModifiedDate.toLocaleDateString(), '</li>'); 
     } 
     document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>; 
  } 

  function handleDragOver(evt) { 
       evt.stopPropagation(); 
       evt.preventDefault(); 
       evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. 
   } 

   // Setup the dnd listeners. 
   var dropZone = document.getElementById('drop_zone');    
   dropZone.addEventListener('dragover', handleDragOver, false); 
   dropZone.addEventListener('drop', handleFileSelect, false);
</script>

示例

請注意，有些瀏覽器會將 <input type="file">元素視為本地拖放目標。在前一個示例中嘗試將文件拖動到輸入字段上。

讀取文件

現在精彩的部分到了！

當您獲取了 File引用后，實例化 FileReader 對象，以便將其內容讀取到內存中。加載結束后，將觸發讀取程序的 onload事件，而其 result屬性可用于訪問文件數據。

FileReader包括四個異步讀取文件的選項：

• FileReader.readAsBinaryString(Blob|File) - result屬性將包含二進制字符串形式的 file/blob 數據。每個字節均由一個 [0..255] 范圍內的整數表示。

• FileReader.readAsText(Blob|File, opt_encoding) - result屬性將包含文本字符串形式的 file/blob 數據。該字符串在默認情況下采用“UTF-8”編碼。使用可選編碼參數可指定其他格式。

• FileReader.readAsDataURL(Blob|File) - result 屬性將包含編碼為數據網址的 file/blob 數據。

• FileReader.readAsArrayBuffer(Blob|File) - result屬性將包含ArrayBuffer 對象形式的 file/blob 數據。

對您的 FileReader 對象調用其中某一種讀取方法后，可使用onloadstart、onprogress、onload、onabort、onerror和 onloadend跟蹤其進度。

下面的示例從用戶選擇的內容中過濾掉了圖片，對文件調用reader.readAsDataURL()，并通過將“src”屬性設為數據網址來呈現縮略圖。

<style> 
    .thumb { height: 75px; border: 1px solid #000; margin: 10px 5px 0 0; }
 </style>

 <input type="file" id="files" name="files[]" multiple />   
 <output id="list"></output>

 <script>
    function handleFileSelect(evt) { 
        var files = evt.target.files; // FileList object 
 
       // Loop through the FileList and render image files as thumbnails. 
       for (var i = 0, f; f = files[i]; i++) { 
          // Only process image files. 
         if (!f.type.match('image.*')) { continue; } 
         var reader = new FileReader(); 
         // Closure to capture the file information. 
         reader.onload = (function(theFile) { 
                 return function(e) { 
                     // Render thumbnail. 
                     var span = document.createElement('span'); 
                     span.innerHTML = ['<img class="thumb" src="',  e.target.result, 
                   '" title="', escape(theFile.name), '"/>'].join(''); 
                     document.getElementById('list').
                     insertBefore(span, null); 
               }; 
         })(f); 
        // Read in the image file as a data URL.        
        reader.readAsDataURL(f); } } 
       document.getElementById('files').
       addEventListener('change', handleFileSelect, false);
 </script>

示例

分割文件

在某些情況下，將整個文件讀取到內存中并不是最好的選擇。例如，您要編寫一個異步文件上傳器。要提高上傳速度，一種可行的方法是以彼此獨立的字節范圍塊讀取和發送文件。然后，由服務器組件負責按正確順序重建文件。
對我們來說幸運的是，File
接口支持分割方法，因而可以支持此用例。在該方法中，起始字節為第一個參數，終止字節為第二個參數，選項內容類型字符串為第三個參數。該方法的語義近期做了更改，因此已由供應商添加前綴：

  if (file.webkitSlice) { 
     var blob = file.webkitSlice(startingByte, endindByte);
  } else if (file.mozSlice) { 
     var blob = file.mozSlice(startingByte, endindByte);
  }
  reader.readAsBinaryString(blob);

以下示例演示了如何讀取文件塊。值得注意的是，該示例使用 onloadend并檢查evt.target.readyState，而不是使用 onload事件。

  <style> 
  #byte_content { margin: 5px 0; max-height: 100px; overflow-y: auto;overflow-x: hidden; } 
  #byte_range { margin-top: 5px; }
  </style>

  <input type="file" id="files" name="file" />
   Read bytes: 
  <span class="readBytesButtons"> 
     <button data-startbyte="0" data-endbyte="4">1-5</button> 
    <button data-startbyte="5" data-endbyte="14">6-15</button> 
    <button data-startbyte="6" data-endbyte="7">7-8</button> 
    <button>entire file</button>
 </span>

<div id="byte_range"></div>
<div id="byte_content"></div>

<script> 
function readBlob(opt_startByte, opt_stopByte) { 
   var files = document.getElementById('files').files; 
   if (!files.length) { 
      alert('Please select a file!'); return; 
   } 
   var file = files[0]; 
   var start = parseInt(opt_startByte) || 0; 
   var stop = parseInt(opt_stopByte) || file.size - 1; 
   var reader = new FileReader(); 

   // If we use onloadend, we need to check the readyState. 
  reader.onloadend = function(evt) { 
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2  
       document.getElementById('byte_content').textContent = evt.target.result; 
       document.getElementById('byte_range').textContent = ['Read bytes: ', start + 1, ' - ', stop + 1, ' of ', file.size, ' byte file'].join(''); 
       } 
  }; 


   if (file.webkitSlice) { 
     var blob = file.webkitSlice(start, stop + 1); 
   } else if (file.mozSlice) { 
     var blob = file.mozSlice(start, stop + 1); 
   } 
   reader.readAsBinaryString(blob); 
} 
 document.querySelector('.readBytesButtons').addEventListener('click', function(evt) { 
   if (evt.target.tagName.toLowerCase() == 'button') { 
    var startByte = evt.target.getAttribute('data-startbyte');     
    var endByte = evt.target.getAttribute('data-endbyte'); 
    readBlob(startByte, endByte); 
  } 
}, false);
</script>

示例

監控讀取進度

我們在使用異步事件處理時還能順便獲得一項優勢，那就是能夠監控文件的讀取進度；這對于讀取大文件、查找錯誤和預測讀取完成時間非常實用。onloadstart和 onprogress事件可用于監控讀取進度。

以下示例演示了如何通過顯示進度條來監控讀取狀態。要查看進度指示器的實際效果，請嘗試讀取大文件或遠程驅動器中的文件。

<style> 
  #progress_bar { margin: 10px 0; padding: 3px; border: 1px solid #000; font-size: 14px; clear: both; opacity: 0; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; -webkit-transition: opacity 1s linear; } 

  #progress_bar.loading { opacity: 1.0; } 
  #progress_bar .percent { background-color: #99ccff; height: auto; width: 0; }
</style>

 <input type="file" id="files" name="file" />
 <button onclick="abortRead();">Cancel read</button>
 <div id="progress_bar">
   <div class="percent">0%</div>
 </div>

<script> 
  var reader; 
  var progress = document.querySelector('.percent'); 

  function abortRead() { 
     reader.abort(); 
  } 
  function errorHandler(evt) { 
     switch(evt.target.error.code) { 
       case evt.target.error.NOT_FOUND_ERR: 
            alert('File Not Found!'); break; 
       case evt.target.error.NOT_READABLE_ERR: 
            alert('File is not readable'); break; 
       case evt.target.error.ABORT_ERR: break; // noop 
       default: alert('An error occurred reading this file.'); 
      }; 
  } 
  function updateProgress(evt) { 
     // evt is an ProgressEvent. 
     if (evt.lengthComputable) { 
       var percentLoaded = Math.round((evt.loaded / evt.total) * 100); 
       // Increase the progress bar length. 
       if (percentLoaded < 100) { 
          progress.style.width = percentLoaded + '%'; 
          progress.textContent = percentLoaded + '%'; 
       } 
    } 
 } 
 function handleFileSelect(evt) { 
   // Reset progress indicator on new file selection.    
   progress.style.width = '0%'; 
   progress.textContent = '0%';
   reader = new FileReader(); 
   reader.onerror = errorHandler; 
   reader.onprogress = updateProgress; 
   reader.onabort = function(e) { 
      alert('File read cancelled'); 
   }; 
   reader.onloadstart = function(e) {    
      document.getElementById('progress_bar').className = 'loading'; 
   }; 
   reader.onload = function(e) { 
      // Ensure that the progress bar displays 100% at the end. 
     progress.style.width = '100%'; 
     progress.textContent = '100%'; 
     setTimeout("document.getElementById('progress_bar').className='';", 2000); } 
  
   // Read in the image file as a binary string.  
   reader.readAsBinaryString(evt.target.files[0]); 
} 
    document.getElementById('files').addEventListener('change', handleFileSelect, false);
 </script>

監控進度條讀取示例