|
我們不止一次的提到File API以及Web應(yīng)用程序?qū)Ρ镜刭Y源的訪問,比如《JavaScript將增加本地操作API 可直接操作本地文件》和《HTML5 File API初探支持文件拖放上傳功能》等。這不只是一個(gè)功能或者API,它還代表了未來Web應(yīng)用開發(fā)的一個(gè)趨勢(shì)。
回想一下過去那些糟糕的日子:要上傳文件到一個(gè)網(wǎng)站需要在一個(gè)file input上點(diǎn)擊“瀏覽”按鈕,然后導(dǎo)航到這個(gè)文件所在的文件夾,再點(diǎn)擊“打開”,如果要上傳多個(gè)文件,需要對(duì)每一個(gè)文件重復(fù)上面的步驟!有了File API,那些日子將一去不復(fù)返了。
File API是什么?
File API是一套強(qiáng)大的API,它可以讓開發(fā)者處理來自于用戶文件系統(tǒng)的文件,并且可以讓開發(fā)者在Web應(yīng)用程序里使用這些文件,所有這些事情都在本地處理,不需要在服務(wù)器上處理。
File API能做什么?
在很多場(chǎng)景下,許多應(yīng)用程序中,F(xiàn)ile API都是很有用的。最明顯的用途就是使用Drag和Drop API在drop事件上訪問文件的,來支持拖放式上傳文件(比如image)。當(dāng)用戶drop文件的時(shí)候,你可以把他們轉(zhuǎn)換成一個(gè)data URL,馬上給用戶提供反饋,同時(shí)可以用異步的方式把要上傳的image的縮略圖展示給用戶,這可以給用戶提供一個(gè)無縫的交互體驗(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,你有兩種方法可以訪問一個(gè)文件并進(jìn)行操作。第一種方法是通過file input和文件屬性。
# document.getElementById("fileinput").files
it知識(shí)庫(kù):未來Web應(yīng)用開發(fā)探秘:File API,轉(zhuǎn)載需保留來源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。