Web前端開發(fā)第18章：文件1本章主要內(nèi)容文件存儲處理用戶文件文件操作文件內(nèi)容操作文件API案例：用戶本地資源管理21.文件存儲文件是用戶可以方便地與他人分享的信息單位。用戶不能分享變量的值，但肯定能創(chuàng)建文件的副本，并用DVD、移動(dòng)存儲器、硬盤或Internet等傳輸文件。文件可以存儲大量數(shù)據(jù)，可以移動(dòng)、復(fù)制、傳輸，與內(nèi)容的性質(zhì)無關(guān)。對于每個(gè)應(yīng)用程序來說，文件總是不可缺少的一部分，但迄今為止，在Web上還沒有處理文件的機(jī)制。僅有的文件選項(xiàng)就是下載或上傳服務(wù)器或用戶計(jì)算機(jī)上已有的文件。在HTML5出現(xiàn)之前，在Web上沒有文件創(chuàng)建、復(fù)制，也沒有文件處理。31.文件存儲HTML5規(guī)范從一開始就考慮到了Web應(yīng)用程序構(gòu)建和操作性的每個(gè)方面。從設(shè)計(jì)到基本的數(shù)據(jù)結(jié)構(gòu)，每件事都考慮到了，文件也不可能遺漏在外。因此，HTML5規(guī)范將文件API整合進(jìn)來。文件API可以同步或異步工作。開發(fā)同步部分，是為了在WebWorkersAPI上工作，這一點(diǎn)與其他API類似，而異步部分針對的是普通Web應(yīng)用程序。這些特征意味著必須注意處理過程中的每個(gè)方面，檢測處理成功還是失敗，日后在此之上可能會采用更簡單的API。41.文件存儲目前瀏覽器的支持情況如表18-1所示。52.處理用戶文件要從用戶的計(jì)算機(jī)上讀取用戶的文件，必須使用FileReader接口。FileReader擁有4個(gè)方法，其中3個(gè)用以讀取文件，另一個(gè)用來中斷讀取，如表18-2中列出了這些方法、參數(shù)及描述。需要注意的是，無論讀取成功或失敗，方法都不會返回讀取結(jié)果，而是將這一結(jié)果存儲在了result屬性中。62.1讀取文件7現(xiàn)場演示：案例18-01：讀取文件2.處理用戶文件在實(shí)際應(yīng)用程序中，文件名、文件大小及文件類型等信息都是必需的，這些信息可以讓用戶了解所處理文件的情況，甚至可以控制用戶的輸入。<input>標(biāo)簽發(fā)送的文件對象提供了可以用來獲得文件信息的多個(gè)屬性，具體屬性如下所示。name：該屬性返回文件的全名（文件名和擴(kuò)展名）。size：該屬性返回文件的大小，以字節(jié)為單位。type：該屬性返回文件的類型，以MIME類型表示。82.2讀取文件屬性9現(xiàn)場演示：案例18-02：讀取文件屬性2.處理用戶文件除了文件外，API還能處理另一個(gè)源類型，即blob。blob是代表原始數(shù)據(jù)的對象。創(chuàng)建blob對象的目的是為了克服JavaScript在處理二進(jìn)制數(shù)據(jù)上的限制。blob通常是由文件生成的，但并不是必需的，不用將整個(gè)文件加載到內(nèi)存就能處理數(shù)據(jù)，這種做法為一小片一小片地處理二進(jìn)制信息提供了可能性。102.3文件分割11現(xiàn)場演示：案例18-03：處理blob2.處理用戶文件將文件加載進(jìn)內(nèi)存需要的時(shí)間長短取決于文件的大小。對小文件來說，加載過程仿佛一蹴而就；但大文件可能需要幾分鐘才能加載完成。除了前邊已經(jīng)提過的load事件，API還提供了幾個(gè)特殊事件，用來告知處理過程的每個(gè)情況。表18-3中歸納了FileReader的事件模型。122.4處理事件13現(xiàn)場演示：案例18-04：用事件來控制流程3.文件操作應(yīng)用程序保留的空間就像一個(gè)沙盒，是一塊有根目錄和配置的小硬盤，要使用這個(gè)硬盤，必須請求為應(yīng)用程序初始化一個(gè)FileSystem。“目錄和文件系統(tǒng)”包含了兩個(gè)不同的版本，分別為異步API和同步API。異步API：對于一般的應(yīng)用來說非常有用，可以防止阻塞。同步API：特別為WebWorkers設(shè)計(jì)。143.1本地磁盤操作3.文件操作考慮到安全性，API接口設(shè)計(jì)時(shí)做了一些限制，具體如下：存儲配額限制(quotalimitations)。同源限制，如只能讀寫同域內(nèi)的cookie和localStorage。文件類型限制，限制可執(zhí)行文件的創(chuàng)建或者重命名為可執(zhí)行文件。153.1本地磁盤操作3.文件操作首先需要通過請求一個(gè)LocalFileSystem對象來得到HTML5文件系統(tǒng)的訪問，使用window.requetFileSystem全局方法的具體代碼如下所示。window.requestFileSystem(type,size,successCallback,opt_errorCallback)163.1本地磁盤操作3.文件操作在使用window.requetFileSystem時(shí)需要注意以下幾個(gè)方面的事項(xiàng)。GoogleChrome和Opera是目前僅有的實(shí)現(xiàn)了這部分API的瀏覽器。因?yàn)樵搶?shí)現(xiàn)還屬于實(shí)驗(yàn)性質(zhì)，所以必須用特定方法webkitRequestFileSystem()替代requestFileSystem()方法。換用這個(gè)方法后，才能在瀏覽器里測試上面的代碼及后面的示例，且參數(shù)type只能選用TEMPORARY，否則會顯示QUOTA_EXCEEDED_ERROR錯(cuò)誤。需要將HTML文件發(fā)布至Web服務(wù)器，通過瀏覽器訪問才能查看效果。173.1本地磁盤操作3.文件操作表18-4列出了requestFileSystem的方法。183.1本地磁盤操作19現(xiàn)場演示：案例18-05：設(shè)置自己的文件系統(tǒng)3.文件操作getFile()方法是API的DirectoryEntry接口的一部分。這個(gè)接口共提供了4種方法用來創(chuàng)建和處理文件及目錄，具體如表18-5所示。203.2創(chuàng)建文件3.文件操作getFile()方法（針對文件）和getDirectory()方法（針對目錄）的用法完全相同。只需要將getFile()換成getDirectory()即可，具體代碼如下所示。213.3創(chuàng)建目錄3.文件操作如前所述，createReader()方法可以得到指定路徑中的項(xiàng)（文件和目錄）列表。這個(gè)方法返回的DirectoryReader對象的readEntries()方法可以讀取指定目錄中的項(xiàng)。DirectoryReader對象的方法如表18-6所示。223.4列出文件23現(xiàn)場演示：案例18-06：列出文件3.文件操作對于執(zhí)行常規(guī)的文件和目錄操作來說，還有幾個(gè)有用的方法。使用這些方法可以移動(dòng)、復(fù)制或刪除項(xiàng)，就像桌面應(yīng)用程序一樣，具體的對象方法如表18-8所示。243.6處理文件25現(xiàn)場演示：案例18-07：移動(dòng)文件3.文件操作moveTo()方法和copyTo()方法唯一的區(qū)別就是后者保留原始文件。要使用copyTo()方法，只需要修改示例18-07代碼中方法的名稱。modify()函數(shù)修改完后具體代碼如下所示。263.7復(fù)制3.文件操作刪除文件或目錄相對于移動(dòng)或復(fù)制文件更為簡單，需要完成的操作就是獲得將要?jiǎng)h除的文檔或目錄的Entry對象，然后在這個(gè)對象上應(yīng)用remove()方法。具體代碼如下所示。273.7刪除3.文件操作如果要?jiǎng)h除的是目錄而不是文件，則必須使用getDirectory()方法創(chuàng)建目錄的Entry對象，然后remove()方法的用法不變。但對目錄來說，有一種情況必須考慮：如果目錄不為空，則remove()方法會返回錯(cuò)誤。如果要?jiǎng)h除目錄及其內(nèi)容，必須使用另一個(gè)方法removeRecursively()。具體代碼如下所示。283.7刪除4.文件內(nèi)容操作要向文件寫入內(nèi)容，必須創(chuàng)建FileWriter對象。該對象是由FileEntry接口的createWriter()方法返回的。本接口是Entry接口的擴(kuò)展，提供了操作文件的兩個(gè)方法，F(xiàn)ileWriter對象方法如表18-9所示。294.1寫入內(nèi)容30現(xiàn)場演示：案例18-08：寫入內(nèi)容4.文件內(nèi)容操作因?yàn)闆]有指定在哪個(gè)位置插入內(nèi)容，所以前面的代碼從文件開始寫入blob，要選擇在現(xiàn)有文件特定位置或末尾追加內(nèi)容，必須使用seek()方法。以下代碼函數(shù)改進(jìn)了前面的writecontent()函數(shù)，加入seek()方法將寫入位置移動(dòng)到文件末尾。這樣write()方法寫入的內(nèi)容就不會覆蓋文件現(xiàn)有的內(nèi)容。314.2追加內(nèi)容4.文件內(nèi)容操作讀取過程要使用FileReader()構(gòu)造函數(shù)和readAsText()等讀取方法讀取并獲得文件的內(nèi)容。3