標籤：style ida 設定 hunk ansi call .com href func
原文:Html5 學習系列（四）檔案操作API引言
在之前我們操作本地檔案都是使用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!
Html5 學習系列（四）檔案操作API
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
