檔案 API

Internet Explorer 10 與使用 JavaScript 的 Windows 市集應用程式引入了對檔案 API 的支援。檔案 API 是全球資訊網協會 (W3C) 草擬的網頁規格,用來表示 Web 應用程式中的檔案物件,並透過程式設計的方式來選取這些物件以及存取其資料。 檔案 API 目前正由 W3C Web 應用程式工作群組進行標準化。只要使用檔案 API,Web 開發人員即可以安全的方式存取用戶端機器上的本機檔案,不需要使用擴充元件或外掛程式。

流暢的檔案上傳經驗

只有使用者具備適當權限時,檔案 API 才會讓瀏覽器或應用程式讀取和操作檔案。此外,檔案 API 不需要外掛程式即可提供更流暢的檔案上傳經驗。

在下列 W3C 檔案 API 範例中,不同的程式碼區塊分別處理進度、錯誤與成功條件:


function startRead() {
  // Obtain input element through DOM.

  var file = document.getElementById('file').files[0];
  if(file) {
    getAsText(file);
  }
}

function getAsText(readFile) {

  var reader = new FileReader();

  // Read file into memory as UTF-16      
  reader.readAsText(readFile, "UTF-16");

  // Handle progress, success, and errors
  reader.onprogress = updateProgress;
  reader.onload = loaded;
  reader.onerror = errorHandler;
}

function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded and evt.total are ProgressEvent properties.
    var loaded = (evt.loaded / evt.total);

    if (loaded < 1) {
      // Increase the progress bar length.
      // style.width = (loaded * 200) + "px";
    }
  }
}

function loaded(evt) {  
  // Obtain the read file data.    
  var fileString = evt.target.result;

// Handle UTF-16 file dump
  if(utils.regexp.isChinese(fileString)) {
    //Chinese Characters + name validation.
  }
  else {
    // Run other charset test.
  }
  // xhr.send(fileString)     
}

function errorHandler(evt) {
  if(evt.target.error.name == "NotReadableError") {
    // The file could not be read.
  }
}


Blob 建構函式

Blob 建構函式可讓 Web 開發人員直接在用戶端上建立或操作 Blob (通常相當於檔案)。 此建構函式定義在 W3C 的檔案 API 規格中,目前仍是工作草稿階段。

在舊版的檔案 API 中,您可以讀取檔案,但無法直接在用戶端中進行編輯。您可以變更檔案的表示法,但若要儲存這些編輯內容,需要將檔案和編輯的內容上傳到伺服器,全部在伺服器上處理之後,再下載變更過的檔案。 您可以使用 Blob 建構函式,從陣列輕鬆地建立 Blob。 此陣列可以包含其他 Blob 物件、文字字串或陣列緩衝區,而且您可以將陣列傳入 Blob 中,做為建立時的參數。

選用的字典物件可以新增為第二個參數,而且可以包含兩個成員:typeendings

下列範例 (適用於 Internet Explorer 10 或更新版本) 簡單地示範這個處理程序:


<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Saving Files Locally</title>
</head>

<body>
  <h1>Saving Files Locally</h1>
  <script>
    //check for Blob availability
    if (typeof Blob !== "undefined") {
      demoBlobs();
    } else {
      //your fallback code here
    }

    function demoBlobs(){  
      //create a Blob with an array and the optional dictionary object.
      var blob1 = new Blob(
        ["There are 10 kinds of people ", "in the world.\r\n"], //array
        { type: "text/plain", endings: "native" } //dictionary object
      );

      //create a second blob that uses the first blob in its array
      var blob2 = new Blob([blob1, "Those who understand binary and those who don't."]);

      // Save the blob1 content to a file, giving just a "Save" option
      window.navigator.msSaveBlob(blob1, 'msSaveBlob_testFile.txt'); 
      alert('File saved using msSaveBlob() - note the single "Save" button below.');
  
      // Save the blob2 content to a file, giving both "Save" *and* "Open" options
      window.navigator.msSaveOrOpenBlob(blob2, 'msSaveBlobOrOpenBlob_testFile.txt'); 
      alert('File saved using msSaveOrOpenBlob() - note the two "Open" and "Save" buttons below.');
    }
  </script>
</body>

</html>


msSaveBlob()msSaveOrOpenBlob() 方法可讓使用者將 Blob 儲存到使用者的電腦,如同從網路下載的檔案一樣。這些檔案預設會儲存到 [下載] 資料夾中。

msSaveBlob()msSaveOrOpenBlob() 的差異在於 msSaveBlob() 方法僅提供 [儲存] 按鈕給使用者。msSaveOrOpenBlob() 方法則同時提供 [儲存] 和 [開啟] 按鈕。執行上述程式碼範例 (在 Internet Explorer 10 或更新版本) 應該會更了解以上說明。

其他改良功能

與檔案相關的其他改良功能包括上傳多個檔案 (每個檔案 4 GB) 以及檔案類型篩選。在下列範例中,使用者可以選取多個圖形交換格式 (GIF) 或 JPEG 檔案:


<input type="file" name="pic" multiple accept="image/gif, image/jpeg" />

如需詳細資訊,請參閱 HTML5 規格的"檔案上傳狀態 (type=file)" 一節。

API 參考

File API

範例和教學課程

如何管理本機檔案

Internet Explorer Test Drive 示範

BlobBuilder
Binary File Inspector

IEBlog 文章

IE10 中新的 Blob 建構函式
透過 BlobBuilder 建立檔案
支援網站和實驗階段的 HTML5
使用具型別陣列處理二進位資料

規格

檔案 API

相關主題

盡情使用檔案 API

 

 

顯示:
© 2014 Microsoft