對(duì)于基于瀏覽器的應(yīng)用而言，訪問(wèn)本地文件都是一件頭疼的事情，通常我們能做的僅僅是使用<input type="file">標(biāo)簽來(lái)上傳文件。實(shí)現(xiàn)過(guò)程是：選取文件的時(shí)候value 屬性保存了用戶指定的文件的名稱，表單被提交的時(shí)候，瀏覽器會(huì)向服務(wù)器發(fā)送選中的文件的內(nèi)容而不僅僅是發(fā)送文件名。再獲取服務(wù)器返回的地址，然后做預(yù)覽。

　　但是如果有一天我們要上傳一個(gè)圖片，傳了圖片后預(yù)覽想換另一張圖片，就又得先上傳到服務(wù)器再預(yù)覽。在網(wǎng)絡(luò)比較慢的情況下，這樣真的很折騰。

　　所以我們某些時(shí)候需要先預(yù)覽再上傳到服務(wù)器，特別是一些有剪切功能的需求，例如新浪微博的頭像更換。但是目前能做的只能是借助插件開發(fā)或者使用flash，由于不同瀏覽器的技術(shù)實(shí)現(xiàn)不盡相同，為了讓程序能夠支持多瀏覽器，我們的程序就會(huì)變得十分復(fù)雜而難于維護(hù)。幸好現(xiàn)在有了File API。

　　通過(guò)監(jiān)聽change事件我們可得知用戶選擇的文件，并且添加了一個(gè)files集合，集合中將包含file對(duì)象，每個(gè)file對(duì)象對(duì)應(yīng)著一個(gè)文件。并且都有以下只讀屬性name,size,type,lastModifiedDate.

以<input type="file" name="file">為例，監(jiān)控onchange事打印它的file對(duì)象：

　　由此我們可得知用戶選取的文件格式，文件名以及文件大小等等的一些信息。因此我們很容易就能為所選取的文件作驗(yàn)證判斷是否符合我們定的一些要求。

除此之外File API還提供了FileReader類型讀取文件中的數(shù)據(jù)。

FileReader類型實(shí)現(xiàn)的事一種異步文件讀取機(jī)制，類似于XMLHttpRequest，但是它讀的是文件系統(tǒng)而不是遠(yuǎn)程服務(wù)器。并且提供了幾種讀取方法：

• readAsText(file,encoding)：以純文本形式讀取文件，將讀取到的文本保存在result屬性中，第二個(gè)參數(shù)用于指定編碼類型，可選。
• readAsDataURL(file)：讀取文件以數(shù)據(jù)URL的形式保存在result屬性中。
• readAsBinaryString(file)：讀取文件并將一個(gè)字符串保存在result屬性中。
• readAsArrayBuffer(file)：讀取文件并將一個(gè)包含文件人容的ArrayBuffer保存在result屬性中

通過(guò)以上方法分別讀取同一張本地圖片，并且把保存在result屬性中的信息打印出來(lái)對(duì)比如下：

readAsText(file,encoding):

readAsDataURL(file):

　　通過(guò)以上對(duì)比我們發(fā)現(xiàn)這些讀取文件的方法為靈活的處理文件數(shù)據(jù)提供了極大的方便。例如讀取圖像文件并且保存為數(shù)據(jù)url，可以做上傳前的預(yù)覽功能。

　　由于讀取的過(guò)程是異步的，所以FileReader里面有幾個(gè)事件分別處理不同的情況：progress(是否讀取了新數(shù)據(jù))、erro(是否發(fā)生了錯(cuò)誤)、load(是否已經(jīng)讀完了整個(gè)文件)。

　　由于種種原因無(wú)法讀取文件就會(huì)觸發(fā)error事件，觸發(fā)error事件的時(shí)會(huì)有一個(gè)屬性code(錯(cuò)誤碼)保存在FileReader的error屬性里面的一個(gè)對(duì)象中。

使用FileReader做上傳預(yù)覽的例子：

HTML：

<label class="item_label">上傳照片： <span style="width: 100px; height: 100px;border:1px solid #ccc; display:inline-block"><img src="#" id="uploadPreview" style="width: 100%; height: 100%;"></span> <input type="file" name="file" id="postFile" style="width:74px;"> <span id="error_text" style="display: none;">提示</span></label>　　

JavaScript：

document.getElementById('postFile').onchange = function() { var val = this.value; var upLoadType = '.jpg,.gif,.bmp,.png';//['.jpg','.gif','.bmp','.png']; //可上傳的格式 var fileExt = val.substr(val.lastIndexOf(".")).toLowerCase(); //從字符串中抽出最后一次出現(xiàn).之后的字符，并且轉(zhuǎn)換成小寫 var result = upLoadType.indexOf(fileExt); //查找后綴名是否符合條件，如果符合返回>=0，如果不符合則返回負(fù)數(shù); _alertMsg = $('#error_text'); var oFReader = new FileReader(); if (this.files.length === 0) { return; } var oFile = this.files[0]; //如果只有一個(gè)文件則只需要訪問(wèn)這個(gè)FileList對(duì)象中的第一個(gè)元素.   if (oFile.size / 1024 < 100) {  _alertMsg.html("<font style='color:blue'>√</font>").show() }; if (result < 0) {  _alertMsg.html("請(qǐng)輸入正確格式:" + upLoadType).show(); } else{  _alertMsg.html("<font style='color:blue'>√</font>").show(); };  oFReader.readAsDataURL(oFile); // 開始在后臺(tái)進(jìn)行讀取操作。當(dāng)圖像文件的所有內(nèi)容加載后,他們轉(zhuǎn)換成一個(gè)data:URL,傳遞到onload回調(diào)函數(shù)中 oFReader.onload = function (oFREvent) { //當(dāng)讀取操作成功完成時(shí)調(diào)用.  document.getElementById("uploadPreview").src = oFREvent.target.result; };};

效果以及返回的圖片URL：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。