未來Web應用開發探秘：File API
原創【51CTO 8月9日外電頭條】我們不止一次的提到File API以及Web應用程序對本地資源的訪問，比如《JavaScript將增加本地操作API 可直接操作本地文件》和《HTML5 File API初探 支持文件拖放上傳功能》等。這不只是一個功能或者API，它還代表了未來Web應用開發的一個趨勢。
回想一下過去那些糟糕的日子：要上傳文件到一個網站需要在一個file input上點擊“瀏覽”按鈕，然后導航到這個文件所在的文件夾，再點擊“打開”，如果要上傳多個文件，需要對每一個文件重復上面的步驟！有了File API，那些日子將一去不復返了。
File API是什么？
File API是一套強大的API，它可以讓開發者處理來自于用戶文件系統的文件，并且可以讓開發者在Web應用程序里使用這些文件，所有這些事情都在本地處理，不需要在服務器上處理。
File API能做什么？
在很多場景下，許多應用程序中，File API都是很有用的。最明顯的用途就是使用Drag和Drop API在drop事件上訪問文件的，來支持拖放式上傳文件（比如image）。當用戶drop文件的時候，你可以把他們轉換成一個data URL，馬上給用戶提供反饋，同時可以用異步的方式把要上傳的image的縮略圖展示給用戶，這可以給用戶提供一個無縫的交互體驗。
幾個例子：
我們收集了一個炫耀File API的例子（http://www.thecssninja.com/demo/crystalball/），這個Demo可以在Firefox3.6和Chrome 6 dev版上正常運行。從你的桌面上拖放任意文件到這個Demo中，看看會發生什么......
◆一個圖片編輯器——http://demos.hacks.mozilla.org/openweb/imageUploader
◆box.net最近添加了對拖放式上傳文件的支持—— box.net
◆font dragr – 測試自定義字體的Web應用程序* – http://fontdragr.com
如何使用File API
使用File API，你有兩種方法可以訪問一個文件并進行操作。第一種方法是通過file input和文件屬性。
- document.getElementById("fileinput").files
上面的代碼訪問了FileList對象，它是一個包含多個文件的序列數組。每個文件都有幾個屬性可用，例如name, size和type
訪問一個文件的另一種方法是通過Drag和Drop API，在dataTransfer對象上，也包含一個FileList對象，dataTransfer對象在DnD API的drop事件上可用。
- event.dataTransfer.files
這兩種方法都返回同一個序列數組。拖放多個文件可以被處理，并且如果file input有multiple屬性，它也可以處理多個文件。
FileReader
為了用FileList對象來做一些事情，在無需服務器參與的情況下操作文件來顯示給用戶，我們可以使用FileReader對象。它是異步處理的，所以只要不鎖定瀏覽器的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);
上面的代碼我們創建了一個新的FileReader對象，然后我們初始化了我們的onload函數，所以只要文件載入了內存，我們就可以操作這個文件了。最后一個函數告訴reader，我們想用這個文件做什么。在我們的實例中，是返回一個DataURL。還有兩個其他的方法可以使用，它們是：
readAsText() 和readAsBinary()
在onload事件的內部，我們創建了一個新的image元素，設置它的source設置成result屬性的值，然后把它附加到document body上。這立刻會把這個image顯示給用戶。
處理大文件——File URL
在前面的例子里，我已經向你展示了如何載入一個文件，然后把它展示給用戶。所有這些方法本質上都是用readAsDataURL/Binary/Text等函數創建一個文件的拷貝，然后把它載入你的可用內存中。當用戶載入了許多文件，或非常大的文件的時候，就會產生問題。比如說，用戶要拖動一個200MB的視頻或者它們拖入了許多的視頻！這將會產生大量的數據，它們都需要載入內存，這會使任何機器突然停止響應，更可能的結果是使瀏覽器崩潰。值得慶幸的是File API的創建者和貢獻者已經想到了這個問題，并且在FileReader對象上添加了一個非常有用的屬性——url。
URL
URL是一個隨機產生的唯一字符串，它映射到你的硬盤上的一個物理文件。這是很有用的，因為這個唯一的字符串可以在html文檔中使用。例如有一個image。把這個image的source設置成File API生成的唯一字符串，不需要把它載入內存，就可以讓你把這個image顯示給用戶。
- <img src="moz-filedata:8616e48b-2a2b-418d-9ad4-5669858cf038" />
上面的例子展示了在Firefox 4中使用的url屬性，image的source應該是什么樣子的。
想象一下這個場景。在你的圖片網站上，你有一個image uploader，用戶在他們的圖片里拖動了一些文件，要drop的那些圖片顯示成了一個漂亮的縮小版本的網格，但是用戶發現了一個問題，認識到那些image中，有一個需要修整一下。他們在一個圖片編輯器中打開這個文件，做了一些修整，回到Web應用程序并點擊上傳按鈕。使用url的好處是改變的文件也可以被上傳，因為它實時的鏈接到文件系統中的物理image，所以無須用戶重新把它們添加到上傳列表中。
到現在為止，Firefox 4是唯一一個支持url屬性的瀏覽器，即便如此，它還存在一個bug：唯一字符串只能顯示通過file input載入的image。無法顯示通過drop事件載入的image。但是，在Firefox 4的穩定版本中，這個bug應該已經被修復了。
看看這個Firefox 4中的Demo（http://www.thecssninja.com/demo/crystalball/fileurl.html），它使用一個file input載入文件，使用了url屬性。
- // Code showing url
- var droppedFileURL = file.url;
- ...
- img.src = droppedFileURL;
上面的代碼很簡單。并不需要附加一個事件來把image載入內存，然后把它轉換成一個data URL，我們只需要簡單的遍歷文件，訪問file對象的url屬性，然后用它設置我們的image的source。對于開發者來說，工作量減輕了，同時用戶計算機的壓力也減輕了。這是一個兩全其美的方法。
向何處前進
在寫這篇文章的時候，只有兩個瀏覽器支持File API：Firefox 3.6和Chrome 6，它們分別在不同程度上支持了File API規范。
File API只是許多正在使用的一線API中的一種。例如，FileWriter和Media Interface（Web攝像頭訪問）在一起使用將爆發出驚人的潛力。這只是未來的開始，離“在桌面的世界里讓Web應用程序成為一等公民”這個目標，我們又近了一步。這條線變得更加模糊了。
【編輯推薦】
原文：The Future of Web Apps: A look at the File API 作者：Ryan Seddon
