未來Web應用開發探秘：File API

作者: Ryan Seddon 發布時間: 2010-08-09 20:49 閱讀: 924 次推薦: 0 原文鏈接 [收藏]

摘要：File API可以讓開發者在本地文件時獲得更大的自由，而不需要把一些過程傳送到服務器上進行復雜而低效的操作。今天我們就一起來探秘File API的使用。

　　我們不止一次的提到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屬性。