引言
在之前我們操作本地檔案都是使用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!
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)