【51CTO 8月9日外電頭條】我們不止一次的提到File API以及Web應(yīng)用程序?qū)Ρ镜刭Y源的訪問(wèn)，比如《JavaScript將增加本地操作API 可直接操作本地文件》和《HTML5 File API初探 支持文件拖放上傳功能》等。這不只是一個(gè)功能或者API，它還代表了未來(lái)Web應(yīng)用開(kāi)發(fā)的一個(gè)趨勢(shì)。

回想一下過(guò)去那些糟糕的日子：要上傳文件到一個(gè)網(wǎng)站需要在一個(gè)file input上點(diǎn)擊“瀏覽”按鈕，然后導(dǎo)航到這個(gè)文件所在的文件夾，再點(diǎn)擊“打開(kāi)”，如果要上傳多個(gè)文件，需要對(duì)每一個(gè)文件重復(fù)上面的步驟！有了File API，那些日子將一去不復(fù)返了。

File API是什么？

File API是一套強(qiáng)大的API，它可以讓開(kāi)發(fā)者處理來(lái)自于用戶(hù)文件系統(tǒng)的文件，并且可以讓開(kāi)發(fā)者在Web應(yīng)用程序里使用這些文件，所有這些事情都在本地處理，不需要在服務(wù)器上處理。

File API能做什么？

在很多場(chǎng)景下，許多應(yīng)用程序中，F(xiàn)ile API都是很有用的。最明顯的用途就是使用Drag和Drop API在drop事件上訪問(wèn)文件的，來(lái)支持拖放式上傳文件（比如image）。當(dāng)用戶(hù)drop文件的時(shí)候，你可以把他們轉(zhuǎn)換成一個(gè)data URL，馬上給用戶(hù)提供反饋，同時(shí)可以用異步的方式把要上傳的image的縮略圖展示給用戶(hù)，這可以給用戶(hù)提供一個(gè)無(wú)縫的交互體驗(yàn)。

幾個(gè)例子：

我們收集了一個(gè)炫耀File API的例子（http://www.thecssninja.com/demo/crystalball/），這個(gè)Demo可以在Firefox3.6和Chrome 6 dev版上正常運(yùn)行。從你的桌面上拖放任意文件到這個(gè)Demo中，看看會(huì)發(fā)生什么......

◆一個(gè)圖片編輯器——http://demos.hacks.mozilla.org/openweb/imageUploader

◆box.net最近添加了對(duì)拖放式上傳文件的支持—— box.net

◆font dragr – 測(cè)試自定義字體的Web應(yīng)用程序* – http://fontdragr.com

如何使用File API

使用File API，你有兩種方法可以訪問(wèn)一個(gè)文件并進(jìn)行操作。第一種方法是通過(guò)file input和文件屬性。

document.getElementById("fileinput").files  
 

上面的代碼訪問(wèn)了FileList對(duì)象，它是一個(gè)包含多個(gè)文件的序列數(shù)組。每個(gè)文件都有幾個(gè)屬性可用，例如name, size和type

訪問(wèn)一個(gè)文件的另一種方法是通過(guò)Drag和Drop API，在dataTransfer對(duì)象上，也包含一個(gè)FileList對(duì)象，dataTransfer對(duì)象在DnD API的drop事件上可用。

event.dataTransfer.files  
 

這兩種方法都返回同一個(gè)序列數(shù)組。拖放多個(gè)文件可以被處理，并且如果file input有multiple屬性，它也可以處理多個(gè)文件。

FileReader

為了用FileList對(duì)象來(lái)做一些事情，在無(wú)需服務(wù)器參與的情況下操作文件來(lái)顯示給用戶(hù)，我們可以使用FileReader對(duì)象。它是異步處理的，所以只要不鎖定瀏覽器的UI，它就一直在處理文件。

var reader = new FileReader();  
       
    reader.onload = function (evt) {  
        // do something with the file once it's loaded  
        var data = evt.target.result, // file is stored in the result attribute;  
              img = document.createElement("img");  
       
        img.src = data;  
        document.getElementsByTagName("body").appendChild(img);  
    }  
    reader.readAsDataURL(file); 
 

上面的代碼我們創(chuàng)建了一個(gè)新的FileReader對(duì)象，然后我們初始化了我們的onload函數(shù)，所以只要文件載入了內(nèi)存，我們就可以操作這個(gè)文件了。最后一個(gè)函數(shù)告訴reader，我們想用這個(gè)文件做什么。在我們的實(shí)例中，是返回一個(gè)DataURL。還有兩個(gè)其他的方法可以使用，它們是：

readAsText() 和readAsBinary()

在onload事件的內(nèi)部，我們創(chuàng)建了一個(gè)新的image元素，設(shè)置它的source設(shè)置成result屬性的值，然后把它附加到document body上。這立刻會(huì)把這個(gè)image顯示給用戶(hù)。

處理大文件——File URL

在前面的例子里，我已經(jīng)向你展示了如何載入一個(gè)文件，然后把它展示給用戶(hù)。所有這些方法本質(zhì)上都是用readAsDataURL/Binary/Text等函數(shù)創(chuàng)建一個(gè)文件的拷貝，然后把它載入你的可用內(nèi)存中。當(dāng)用戶(hù)載入了許多文件，或非常大的文件的時(shí)候，就會(huì)產(chǎn)生問(wèn)題。比如說(shuō)，用戶(hù)要拖動(dòng)一個(gè)200MB的視頻或者它們拖入了許多的視頻！這將會(huì)產(chǎn)生大量的數(shù)據(jù)，它們都需要載入內(nèi)存，這會(huì)使任何機(jī)器突然停止響應(yīng)，更可能的結(jié)果是使瀏覽器崩潰。值得慶幸的是File API的創(chuàng)建者和貢獻(xiàn)者已經(jīng)想到了這個(gè)問(wèn)題，并且在FileReader對(duì)象上添加了一個(gè)非常有用的屬性——url。

URL

URL是一個(gè)隨機(jī)產(chǎn)生的唯一字符串，它映射到你的硬盤(pán)上的一個(gè)物理文件。這是很有用的，因?yàn)檫@個(gè)唯一的字符串可以在html文檔中使用。例如有一個(gè)image。把這個(gè)image的source設(shè)置成File API生成的唯一字符串，不需要把它載入內(nèi)存，就可以讓你把這個(gè)image顯示給用戶(hù)。

<img src="moz-filedata:8616e48b-2a2b-418d-9ad4-5669858cf038" /> 
 

上面的例子展示了在Firefox 4中使用的url屬性，image的source應(yīng)該是什么樣子的。

想象一下這個(gè)場(chǎng)景。在你的圖片網(wǎng)站上，你有一個(gè)image uploader，用戶(hù)在他們的圖片里拖動(dòng)了一些文件，要drop的那些圖片顯示成了一個(gè)漂亮的縮小版本的網(wǎng)格，但是用戶(hù)發(fā)現(xiàn)了一個(gè)問(wèn)題，認(rèn)識(shí)到那些image中，有一個(gè)需要修整一下。他們?cè)谝粋€(gè)圖片編輯器中打開(kāi)這個(gè)文件，做了一些修整，回到Web應(yīng)用程序并點(diǎn)擊上傳按鈕。使用url的好處是改變的文件也可以被上傳，因?yàn)樗鼘?shí)時(shí)的鏈接到文件系統(tǒng)中的物理image，所以無(wú)須用戶(hù)重新把它們添加到上傳列表中。

到現(xiàn)在為止，F(xiàn)irefox 4是唯一一個(gè)支持url屬性的瀏覽器，即便如此，它還存在一個(gè)bug：唯一字符串只能顯示通過(guò)file input載入的image。無(wú)法顯示通過(guò)drop事件載入的image。但是，在Firefox 4的穩(wěn)定版本中，這個(gè)bug應(yīng)該已經(jīng)被修復(fù)了。

看看這個(gè)Firefox 4中的Demo（http://www.thecssninja.com/demo/crystalball/fileurl.html），它使用一個(gè)file input載入文件，使用了url屬性。

// Code showing url  
var droppedFileURL = file.url;  
...  
img.src = droppedFileURL; 

上面的代碼很簡(jiǎn)單。并不需要附加一個(gè)事件來(lái)把image載入內(nèi)存，然后把它轉(zhuǎn)換成一個(gè)data URL，我們只需要簡(jiǎn)單的遍歷文件，訪問(wèn)file對(duì)象的url屬性，然后用它設(shè)置我們的image的source。對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，工作量減輕了，同時(shí)用戶(hù)計(jì)算機(jī)的壓力也減輕了。這是一個(gè)兩全其美的方法。

向何處前進(jìn)

在寫(xiě)這篇文章的時(shí)候，只有兩個(gè)瀏覽器支持File API：Firefox 3.6和Chrome 6，它們分別在不同程度上支持了File API規(guī)范。

File API只是許多正在使用的一線API中的一種。例如，F(xiàn)ileWriter和Media Interface（Web攝像頭訪問(wèn)）在一起使用將爆發(fā)出驚人的潛力。這只是未來(lái)的開(kāi)始，離“在桌面的世界里讓W(xué)eb應(yīng)用程序成為一等公民”這個(gè)目標(biāo)，我們又近了一步。這條線變得更加模糊了。

【編輯推薦】

1. 使用HTML5構(gòu)建下一代的Web Form
2. Google網(wǎng)頁(yè)工具包(GWT)是Web開(kāi)發(fā)的未來(lái)？
3. Google力挺HTML 5 或成未來(lái)應(yīng)用核心
4. Web領(lǐng)域那些陰魂不散的技術(shù)與思想

 原文：The Future of Web Apps: A look at the File API    作者：Ryan Seddon