移動Web開發(fā)之文件操作處理.

1、文件操作基礎(chǔ)知識實例9-1：在表單中選擇單個文件實例9-5：讀取文件內(nèi)容實例9-2：通過類型過濾上傳文件儲方式實例9-3：通過accept屬性過濾選擇文件的類型實例9-4：用readAsDataURL()預(yù)覽圖片實例9-6：同時上傳多個文件實例9-7：獲取文件類型與大小綜合實例：用拖動的方式選擇并瀏覽文件當(dāng)創(chuàng)建“file”類型的元素上傳文件時，該元素在頁面中不再顯示為文本框效果，而是顯示為一個“選擇文件”的按鈕，并且在按鈕的右側(cè)顯示選擇上傳文件的名稱。因為在初始化頁面時沒有上傳文件，所以會顯示為“未選擇文件”字樣。HTML5標(biāo)記語言中，除了可以選擇單個上傳文件外，還可以同時選擇多個上傳文件，此

2、功能的具體實現(xiàn)流程如下：（1）為元素添加multiple屬性；（2）將屬性multiple的值設(shè)為true。在HTML5頁面中，一個文件對應(yīng)一個File對象，在該對象中存在以下兩個重要屬性：name：表示不包含路徑的文件名稱。lastModifiedDate：表示最后修改文件的時間。當(dāng)使用file類型的元素選擇多個文件時，該元素中就含有多個File對象，從而形成了FileList對象，也就是File對象的列表。Filelist接口有兩個重要成員：item方法：方法：返回Filelist數(shù)組的第index個數(shù)組元素。length：數(shù)組元素的數(shù)量。在HTML5網(wǎng)頁應(yīng)用中，通過訪問Blob對象的方式

3、可以獲取上傳文件的類型和大小屬性。Blob表示二進(jìn)制數(shù)據(jù)塊，通過接口Blob中的slice方法可以訪問指定長度與類型的字節(jié)內(nèi)部數(shù)據(jù)塊。Blob接口提供了如下所示的兩個屬性：size：表示返回數(shù)據(jù)塊的大小。type：表示返回數(shù)據(jù)塊的MIME類型，如果不能確定數(shù)據(jù)塊的類型，則返回一個空字符串。Blob接口定義了下面兩個方法：slice：返回從start開始到end結(jié)束的contentType數(shù)據(jù)類型新的Blob對象。close：關(guān)閉Blob對象。在HTML5網(wǎng)頁應(yīng)用中，F(xiàn)ileReader接口提供了一個異步的API，通過這個API不僅可以讀取圖片文件，而且還可以讀取文本或二進(jìn)制文件。同時，根據(jù)該接

4、口提供的事件與方法，可以動態(tài)偵察文件讀取時的詳細(xì)狀態(tài)。當(dāng)訪問不同文件時，必須重新調(diào)用FileReader接口的構(gòu)造函數(shù)。因為每調(diào)用一次，F(xiàn)ileReader接口都會返回一個新的FileReader對象，只有這樣才能訪問不同文件的數(shù)據(jù)。在FileReader接口中，擁有許多用于讀取文件或響應(yīng)事件的方法，例如觸發(fā)onabort事件時，需要調(diào)用abort()方法。FileReader接口中常用方法如右表所示。FileReader接口的常用方法在HTML5提供的FileReader接口中，包含了很多常用的事件和一套完整的事件處理機(jī)制。通過觸發(fā)這些事件可以清晰地偵聽FileReader對象讀取文件的詳細(xì)

5、過程，以便更加精確地定位每次讀取文件時的事件先后順序，為編寫事件代碼提供有力的支持。接口FileReader中的常用事件如下：onabort：中斷時觸發(fā)。onerror：出錯時觸發(fā)。onload：文件成功讀取完畢時觸發(fā)。onloadend：文件讀取完畢時觸發(fā)，無論是否失敗。onloadstart：文件開始讀取時觸發(fā)。onprogress：當(dāng)文件讀取時，周期性地觸發(fā)。在現(xiàn)實應(yīng)用中，網(wǎng)頁文件通過接口FileReader中的方法進(jìn)行正常讀取工作時，觸發(fā)事件的先后順序如下：onloadstartonprogressonloadonloadend在調(diào)用接口FileReader中的方法正常讀取文件時，大部

6、分的文件讀取過程都集中在onprogress事件中，該事件耗時最長。如果文件在讀取過程中出現(xiàn)異?；蛑兄?，那么將結(jié)束onprogress事件，直接觸發(fā)onerror或onabort事件，而不會觸發(fā)onload事件。另外，onload事件是文件讀取成功時觸發(fā)，而onloadend雖然也是文件操作成功時觸發(fā)，但該事件不論文件讀取是否成功，都將觸發(fā)。由此可見，要想要正確獲取文件數(shù)據(jù)，必須在onload事件中編寫代碼。具體實現(xiàn)流程如下：（1）新建一個HTML5頁面，在里面創(chuàng)建一個“file”類型的元素。（2）單擊元素的“選擇文件”按鈕后可以選擇一個圖片文件。（3）單擊“打開”按鈕或雙擊該文件后，在“選擇

7、文件”按鈕的右側(cè)將顯示該圖片文件的名稱。文件9-1.html的具體實現(xiàn)代碼如下：選擇單個文件上傳 上傳單個文件： 執(zhí)行后的效果如下圖所示。執(zhí)行效果由上述執(zhí)行效果可以看出，當(dāng)單擊“選擇文件”按鈕并選中上傳文件后，在沒有編寫任何JavaScript代碼的情況下，就可以在頁面中顯示出所選文件的名稱。在HTML5網(wǎng)頁應(yīng)用中，通過File對象可以獲取每個上傳文件的名稱、類型、大小?；谶@個原理，可以過濾上傳文件的類型，具體流程如下：（1）選擇上傳文件后遍歷每一個File對象，然后獲取該對象的類型，并將該類型與設(shè)置的過濾類型進(jìn)行匹配。（2）如果不符合，則提示上傳文件類型出錯或拒絕上傳，從而實現(xiàn)在選擇文件時

8、過濾掉不需要上傳的文件。在接下來的內(nèi)容中，將通過一個演示實例來講解使用類型過濾上傳文件的方法。具體實現(xiàn)流程如下：（1）新建一個HTML5頁面，然后在頁面表單中創(chuàng)建一個“file”類型的元素，并設(shè)置“multiple”屬性為“true”，用于選擇多個文件。（2）當(dāng)單擊“選擇文件”按鈕，并選取了需要上傳的文件后，開始調(diào)用JS文件js2.js進(jìn)行處理。（3）如果選取的文件中存在不符合“圖片”類型的文件，則在頁面中顯示總數(shù)量與文件名稱。實例文件9-2.html的具體實現(xiàn)代碼如下：通過類型過濾上傳文件 上傳過濾類型后的文件： 再看JavaScript文件js2.js，功能是調(diào)用fileUpload_Ch

9、eckType()函數(shù)按設(shè)置的類型格式過濾需要上傳的文件，具體實現(xiàn)的代碼如下：function $(id) return document.getElementById(id);/選擇上傳文件時調(diào)用的函數(shù)function fileUpload_CheckType(f) var strP = , strN = , intJ = 0; var strFileType = /image.*/; for (var intI = 0; intI f.length; intI+) var tmpFile = fintI; if (!tmpFile.type.match(strFileType) intJ

10、= intJ + 1; strN = strN + tmpF + ; strP = 檢測到( + intJ + )個非圖片格式文件 ; if (intJ 0) strP = strP + 文件名如下: + strN + ; $(pTip).innerHTML= strP;在上述代碼中，如果上傳的文件是圖片類型，則File對象返回的類型均以“image/”開頭，后面添加“*”以表示所有的圖片類型，或添加“gif”表示某種類型圖片。如果是一個圖片文件，則該文件返回的類型必定以“image/”字樣開頭。正因為上述設(shè)置，當(dāng)在本實例中遍歷傳回的文件集合時，通過match()方法檢測每個文

11、件返回的類型中是否含有“image/*”。如果沒有，說明是非圖片類型文件，分別將總量與文件名稱以疊加的形式保存在變量中；然后將變量的內(nèi)容賦值給ID號為“pTip”的元素；最后，通過該元素顯示全部過濾文件的總量與名稱表。本實例執(zhí)行后的效果如下圖所示。執(zhí)行效果在HTML5網(wǎng)頁應(yīng)用中，可以設(shè)置“file”類型元素的“accept”屬性為文件的過濾類型。設(shè)置完“accept”屬性值后，在打開窗口選擇文件時，默認(rèn)的文件類型就是所設(shè)置的過濾類型。下面將通過一個演示實例來學(xué)習(xí)通過通過accept屬性過濾選擇文件類型的方法。具體實現(xiàn)流程如下：（1）新建一個HTML5頁面，在頁面表單中創(chuàng)建一個“file”類型的

12、元素。（2）在元素中添加一個“accept”屬性，將屬性值設(shè)置為“image/gif”。（3）當(dāng)用戶單擊“選擇文件”按鈕時，在打開的文件選擇窗口中，將顯示設(shè)置的文件類型為“Gif Image”。實例文件9-3.html的具體實現(xiàn)代碼如下：通過accept屬性過濾某類型上傳文件 選擇某類型上傳文件： 執(zhí)行后的效果如下圖所示。執(zhí)行效果下面通過一個演示實例來講解通過readAsDataURL()方法預(yù)覽圖片的方法。具體實現(xiàn)流程如下：（1）新建一個HTML5頁面，然后在頁面表單中添加一個“file”類型的元素，用于選擇上傳文件。（2）設(shè)置屬性“multiple”的值為“true”，表示允許選擇多個文件

13、。（3）單擊“選擇文件”按鈕后，如果選擇的是一個圖片格式的文件，則調(diào)用JS文件js4.js在頁面中顯示這個圖片。實例文件9-4.html的具體實現(xiàn)代碼如下：使用readAsDataURL()方法預(yù)覽圖片 預(yù)覽圖片文件： js4.js文件的功能是調(diào)用fileUpload_PrevImageFile()方法訪問fileReader接口，將選擇的文件以數(shù)據(jù)URL的方式返回并顯示在頁面中。具體實現(xiàn)流程如下：（1）遍歷傳回的上傳文件集合，獲取每個File對象。（2）因為每個文件返回的數(shù)據(jù)塊都不同，所以在每次讀取文件前需要先重構(gòu)一個新的FileReader對象，然后將每個文件以數(shù)據(jù)URL的方式讀入頁面中。

14、（3）讀取成功時觸發(fā)onload事件，在該事件中通過“result”屬性獲取文件讀入頁面中的URL地址，并將該地址與元素進(jìn)行綁定。（4）通過列表ID號為“ulUpload”的列表元素展示在頁面中，從而實現(xiàn)上傳圖片文件預(yù)覽的效果。在本實例中，需要引用FileReader接口提供的讀取文件方法readAsDataURL()。在引用接口之前，需要考慮各個瀏覽器對接口的兼容性差異，因此首先利用JavaScript代碼檢測用戶的瀏覽器是否支持FileReader對象，如果不支持則提示出錯信息。文件js4.js的具體實現(xiàn)的代碼如下：function $(id) return document.getEle

15、mentById(id);/選擇上傳文件時調(diào)用的函數(shù)function fileUpload_PrevImageFile(f) /檢測瀏覽器是否支持FileReader對象 if (typeof FileReader = undefined) alert(檢測到您的瀏覽器不支持FileReader對象!); var strHTML= ; for (var intI = 0; intI f.length; intI+) var tmpFile = fintI; var reader = new FileReader(); reader.readAsDataURL(tmpFile); reader.

16、onload = function(e) strHTML= strHTML+ ; strHTML= strHTML+ ; strHTML= strHTML+ ; $(ulUpload).innerHTML= + strHTML+ ; 執(zhí)行后的效果如下圖所示。執(zhí)行效果在HTML5標(biāo)記語言中，使用FileReader接口中的readAsText()方法可以以文本編碼的方式讀取文件，也就是說可以讀取上傳文本文件的內(nèi)容。實現(xiàn)上述功能的方法與讀取圖片基本相似，只是讀取文件的方式不同而已。下面我們通過一個演示實例來講解使用readAsText()方法讀取文本文件內(nèi)容的方法。具體實現(xiàn)流程如下：（1）新建一個

17、HTML5頁面，在頁面表單中新建一個“file”類型的元素，用于獲取上傳的文本文件。（2）當(dāng)單擊“選擇文件”按鈕并選中一個文本文件后，通過調(diào)用JS文件js5.js在頁面中將顯示該文本文件的內(nèi)容。實例文件9-5.html的具體實現(xiàn)代碼如下：使用fileReader方法讀取文本文件 讀取文本文件: js5.js文件的功能是調(diào)用fileUpload_ReadTxtFile()方法，將文件以文本編碼方式讀取并返回頁面，具體實現(xiàn)代碼如下：function $(id) return document.getElementById(id);/選擇上傳文件時調(diào)用的函數(shù)function fileUpload_R

18、eadTxtFile(f) /檢測瀏覽器是否支持FileReader對象 if (typeof FileReader = undefined) alert(檢測到您的瀏覽器不支持FileReader對象!); var tmpFile = f0; var reader = new FileReader(); reader.readAsText(tmpFile); reader.onload = function(e) $(artShow).innerHTML= + e.target.result + ; 在上述代碼中，首先檢測瀏覽器是否支持FileReader對象，如果支持則重構(gòu)一個新的File

19、Reader對象，并調(diào)用該對象的readAsText()方法將文件以文本編碼的方式讀入頁面中；然后通過result屬性獲取讀入的內(nèi)容，并將該內(nèi)容賦值給ID號為“artShow”的元素；最后，通過該元素將文本文件的內(nèi)容顯示在頁面。本實例執(zhí)行后的效果如右圖所示。執(zhí)行效果本實例的具體實現(xiàn)流程如下：（1）新建一個HTML5頁面，在頁面中創(chuàng)建一個“file”類型的元素，添加“multiple”屬性，并將該屬性的值設(shè)置為“true”。（2）單擊“選擇文件”時，同時選擇3個文件。（3）單擊“打開”按鈕后，在“選擇文件”按鈕的右側(cè)將顯示“3個文件”的字樣。（4）當(dāng)移動鼠標(biāo)至文字上時，將顯示這3個文件的詳細(xì)名稱

20、與類型。實例文件9-6.html的具體實現(xiàn)代碼如下：選擇多個文件上傳 上傳多個文件： 在上述代碼中，因為在“file”類型的元素中添加了“multiple”屬性，所以可以通過該元素選擇多個文件。當(dāng)選擇成功后，不會在“選擇文件”按鈕右側(cè)顯示文件的名稱，而是顯示成功選擇文件的總數(shù)。執(zhí)行效果如下圖所示。執(zhí)行效果當(dāng)將鼠標(biāo)移至總數(shù)時，會顯示全部上傳文件的詳細(xì)列表。這個功能的實現(xiàn)是因為當(dāng)選中多個文件時，在上傳文件元素中將會產(chǎn)生一個“FileList”對象，用來裝載各個文件的基本信息，如文件名稱、類型、大小等。當(dāng)在上傳文件總量的文字上移動鼠標(biāo)時，將調(diào)用該對象的列表信息展示在頁面中。具體實現(xiàn)流程如下：（1）新

21、建一個HTML5頁面，在頁面的表單中創(chuàng)建一個“file”類型的元素。（2）將元素元素的“multiple”屬性設(shè)置為“true”，這表示允許選擇多個文件。（3）當(dāng)單擊“選擇文件”按鈕，選取多個需要上傳的文件后，通過調(diào)用js3.js文件，在頁面中以列表的方式展示所選文件的名稱、類型、大小信息。實例文件9-7.html的具體實現(xiàn)代碼如下：獲取上傳文件的類型與大小 上傳多個文件： js7.js文件調(diào)用了fileUpload_GetFileList方法，以列表的形式展示上傳文件的數(shù)據(jù)信息。其具體實現(xiàn)代碼如下：function $(id) return document.getElementById(id);/選擇上傳文件時調(diào)用的函數(shù)function fileUpload_GetFileList(f) var strLi = ; strLi = strLi + 文件名稱; strLi = strLi + 文件類型; strLi =