Html5 學習系列（四）文件操做API

時間 2019-11-20

標籤 html5 html 學習系列文件 api 欄目 HTML5 简体版

原文原文鏈接

引言

在以前咱們操做本地文件都是使用flash、silverlight或者第三方的activeX插件等技術，因爲使用了這些技術後就很難進行跨平臺、或者跨瀏覽器、跨設備等狀況下實現統一的表現，從另一個角度來講就是讓咱們的web應用依賴了第三方的插件，而不是很獨立，不夠通用。在HTML5標準中，默認提供了操做文件的API讓這一切直接標準化。有了操做文件的API，讓咱們的Web應用能夠很輕鬆的經過JS來控制文件的讀取、寫入、文件夾、文件等一系列的操做，讓Web應用再也不那麼蹩腳，而以前Web應用若是不借助第三方插件，那就是個shit！可是最新的標準中大部分瀏覽器都已經實現了文件的讀取API，文件的寫入，文件和文件夾的最新的標準剛制定完畢，相信後面隨着瀏覽器的升級這些功能確定會實現的很是好，接下來我主要給你們介紹文件讀取的幾個API。javascript

幾個重要的JS對象

1):FileList對象
它是File對象的一個集合，在Html4標準中文件上傳控件只接受一個文件，而在新標準中，只須要設置multiple，就支持多文件上傳，因此今後標籤中獲取的files屬性就是FileList對象實例。demo：<input type="file" multiple="multiple" name="fileDemo" id="fileDemo" /> ；下面是關於FileList對象的API的原型： html

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

2)Blob對象java

其實就是一個原始數據對象，它提供了slice方法能夠讀取原始數據中的某塊數據。另外有兩個屬性：size（數據的大小），type（數據的MIME類型）；看下面的是W3C的API原型：jquery

    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的標準：
web

 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就是中止讀取的方法。其餘的就是事件和狀態再也不贅述。服務器

三個方法都介紹一下：app

readAsBinaryString(Blob blob); → 傳入一個Blob對象，而後讀取數據的結果做爲二進制字符串的形式放到FileReader的result屬性中。異步

readAsText(Blob blob, optional DOMString encoding);→第一個參數傳入Blog對象，而後第二個參數傳入編碼格式，異步將數據讀取成功後放到result屬性中，讀取的內容是普通的文本字符串的形式。async

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>