Html5學習系列（四）檔案操作API

aicoder發表於2012-06-02
HTMLAPI

引言

    在之前我們操作本地檔案都是使用flash、silverlight或者第三方的activeX外掛等技術，由於使用了這些技術後就很難進行跨平臺、或者跨瀏覽器、跨裝置等情況下實現統一的表現，從另外一個角度來說就是讓我們的web應用依賴了第三方的外掛，而不是很獨立，不夠通用。在HTML5標準中，預設提供了操作檔案的API讓這一切直接標準化。有了操作檔案的API，讓我們的Web應用可以很輕鬆的通過JS來控制檔案的讀取、寫入、資料夾、檔案等一系列的操作，讓Web應用不再那麼蹩腳，而之前Web應用如果不借助第三方外掛，那就是個shit！但是最新的標準中大部分瀏覽器都已經實現了檔案的讀取API，檔案的寫入，檔案和資料夾的最新的標準剛制定完畢，相信後面隨著瀏覽器的升級這些功能肯定會實現的非常好，接下來我主要給大家介紹檔案讀取的幾個API。

幾個重要的JS物件

1):FileList物件
  它是File物件的一個集合，在Html4標準中檔案上傳控制元件只接受一個檔案，而在新標準中，只需要設定multiple，就支援多檔案上傳，所以從此標籤中獲取的files屬性就是FileList物件例項。demo：<input type=”file” multiple=”multiple” name=”fileDemo” id=”fileDemo” />  ；下面是關於FileList物件的API的原型：
 

interface FileList {
      getter File? item(unsigned long index);
      readonly attribute unsigned long length;
};

2)Blob物件

其實就是一個原始資料物件，它提供了slice方法可以讀取原始資料中的某塊資料。另外有兩個屬性：size（資料的大小），type（資料的MIME型別）；看下面的是W3C的API原型：

    interface Blob {
      
      readonly attribute unsigned long long size;
      readonly attribute DOMString type;
      
      //slice Blob into byte-ranged chunks     
      Blob slice(optional long long start,
                 optional long long end,
                 optional DOMString contentType); 
    
    };

3）File物件
繼承自Blob物件，指向一個具體的檔案，它還有兩個屬性：name（檔名), lastModifiedDate（最後修改時間)；然後讓我們看一些W3C的標準：

 interface File : Blob {

          readonly attribute DOMString name;
          readonly attribute Date lastModifiedDate;
 };

4）FileReader物件
設計用來讀取檔案裡面的資料，提供三個常用的讀取檔案資料的方法，另外讀取檔案資料使用了非同步的方式，非常高效。然後讓我們看一些W3C的標準：

[Constructor]
    interface FileReader: EventTarget {

      // async read methods
      void readAsArrayBuffer(Blob blob);
      void readAsBinaryString(Blob blob);
      void readAsText(Blob blob, optional DOMString encoding);
      void readAsDataURL(Blob blob);

      void abort();

      // states  
      const unsigned short EMPTY = 0;
      const unsigned short LOADING = 1;
      const unsigned short DONE = 2;


      readonly attribute unsigned short readyState;

      // File or Blob data
      readonly attribute any result;

      readonly attribute DOMError error;

      // event handler attributes
      attribute [TreatNonCallableAsNull] Function? onloadstart;
      attribute [TreatNonCallableAsNull] Function? onprogress;
      attribute [TreatNonCallableAsNull] Function? onload;
      attribute [TreatNonCallableAsNull] Function? onabort;
      attribute [TreatNonCallableAsNull] Function? onerror;
      attribute [TreatNonCallableAsNull] Function? onloadend;

    };

這個物件是非常重要第一個物件，它提供了四個讀取檔案資料的方法，這些方法都是非同步的方式讀取資料，讀取成功後就直接將結果放到屬性result中。所以一般就是直接讀取資料，然後監聽此物件的onload事件，然後在事件裡面讀取result屬性，再做後續處理。當然abort就是停止讀取的方法。其他的就是事件和狀態不再贅述。

三個方法都介紹一下：

readAsBinaryString(Blob blob);  → 傳入一個Blob物件，然後讀取資料的結果作為二進位制字串的形式放到FileReader的result屬性中。

readAsText(Blob blob, optional DOMString encoding);→第一個引數傳入Blog物件，然後第二個引數傳入編碼格式，非同步將資料讀取成功後放到result屬性中，讀取的內容是普通的文字字串的形式。

readAsDataURL(Blob blob);→傳入一個Blob物件，讀取內容可以做為URL屬性，也就是說可以將一個圖片的結果指向給一個img的src屬性。                                  

讀取檔案上傳控制元件裡的檔案並將內容已不同的方式展現到瀏覽器裡面例項

　　在展示程式碼之前，之前我們操作一個圖片檔案，都是先將圖片上傳到伺服器端，然後再使用一個img標籤指向到伺服器的url地址，然後再進行一個使用第三方外掛進行圖片處理，而現在這一切都不需要伺服器端了，因為FileReader物件提供的幾個讀取檔案的方法變得異常簡單，而且全不是客戶端js的操作。且看下面的demo：

案例一：獲取上傳檔案的檔名(線上演示地址)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnGetFile").click(function (e) {
                var fileList = document.getElementById("fileDemo").files;
                for (var i = 0; i < fileList.length; i++) {
                    if (!(/image/w+/.test(fileList[i].type))) {
                         $("#result").append("<span>type:"+fileList[i].type+"--******非圖片型別*****--name:"+fileList[i].name+"--size:"+fileList[i].size+"</span><br />");
                    }
                    else {
                        $("#result").append("<span>type:"+fileList[i].type+"--name:"+fileList[i].name+"--size:"+fileList[i].size+"</span><br />");
                    }
                }
            });
        });

    </script>
</head>
<body>
    <form action="/home/index" method="POST" novalidate="true">
        <input type="file" multiple="multiple" name="fileDemo" id="fileDemo" /><br/>
        <input type="button" value="獲取檔案的名字" id="btnGetFile"/>
        <div id="result"></div>
    </form>
    <hr/>
</body>
</html>

 

案例二：讀取上傳檔案內容，然後將檔案內容直接讀取到瀏覽器上(線上演示地址)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>  
    <script type="text/javascript">
        
        if(typeof FileReader == "undified") {
            alert("您老的瀏覽器不行了！");
        }

        function showDataByURL() {
            var resultFile = document.getElementById("fileDemo").files[0];
            if (resultFile) {
                var reader = new FileReader();
                
                reader.readAsDataURL(resultFile);
                reader.onload = function (e) {
                    var urlData = this.result;
                    document.getElementById("result").innerHTML += "<img src=`" + urlData + "` alt=`" + resultFile.name + "` />";
                }; 
               
            }
            
        } 

        function showDataByBinaryString() {
              var resultFile = document.getElementById("fileDemo").files[0];
            if (resultFile) {
                var reader = new FileReader();
                //非同步方式，不會影響主執行緒
                reader.readAsBinaryString(resultFile);
                
                reader.onload = function(e) {
                    var urlData = this.result;
                    document.getElementById("result").innerHTML += urlData;
                };
            }
        }


        function showDataByText() {
            var resultFile = document.getElementById("fileDemo").files[0];
            if (resultFile) {
                var reader = new FileReader();

                reader.readAsText(resultFile,`gb2312`);
                reader.onload = function (e) {
                    var urlData = this.result;
                    document.getElementById("result").innerHTML += urlData;
                };
            }
        }
        
    </script>
</head>
<body>
    <input type="file" name="fileDemo" id="fileDemo" multep/>
    <input type="button" value="readAsDataURL" id="readAsDataURL" onclick="showDataByURL();"/>
    <input type="button" value="readAsBinaryString"  id="readAsBinaryString" onclick="showDataByBinaryString();"/>
    <input type="button" value="readAsText"  id="readAsText" onclick="showDataByText();"/>
    <div id="result">
        
    </div>

</body>
</html>

 

總結

       有了檔案操作的API後，讓JS進一步的操作本地檔案的得到空前的加強，HTML5對於客戶端Web應用得到進一步功能的提升，HTML5的趨勢讓Web更加富客戶端化，而這些都需要讓我們的HTML或者JS變得更加強大，而HTML5正是適時地推出了File API!


相關文章