柚子快報激活碼778899分享：前端 HTML5-簡單文件操作

http://yzkb.51969.com/

文件操作

簡介

概念：可以通過file類型的input控件或者拖放的方式選擇文件進行操作 語法格式：

屬性

multiple：表示是否選擇多個文件 accept：用于設置文件的過濾類型（MIME類型）

如果想要同時設置多個過濾類型，可以用英文逗號（,）隔開

常見的acept屬性取值/MIME類型

屬性值說明image/jepgJEPG圖片image/pngPNG圖片image/gifGIF圖片text/plainTXT文件text/htmlHTML文件text/cssCSS文件text/JavaScriptJS文件text/xmlXML文件audio/mpegMP3文件audio/mp4MP4文件application/mswordWord文件application/vnd.ms-powerpointPPT文件application/vnd.ms-excelExcel文件application/pdfPDF文件image/*所有圖片文件audio/*所有聲音文件video/*所有視頻文件

實例

運行結果

注意：為元素添加multiple屬性后，就可以選擇多個文件了。當選擇成功后，按鈕右側不再顯示文件的名稱，而是顯示文件的總量。當鼠標指針移到上面時，就會顯示全部上傳文件的詳細列表

File對象

概念：在文件上傳元素中，將會產生一個FileList對象，這是一個類數(shù)組對象，表示所有文件的集合。

其中，每一個文件就是一個File對象

想要獲取某一個File文件對象

首先需要獲取FileList對象 然后通過數(shù)組下標形式來獲取

File對象屬性

屬性說明name文件名稱type文件類型size文件大?。▎挝粸锽）lastModifiedDate文件最后的修改時間

實例：File對象的屬性

運行結果

實例：轉化單位

運行結果

FileReader對象

概念：FileReader對象作為文件API用于讀取文件。

FileReader對象可以讀取文件中的數(shù)據(jù)和包含讀取結果的事件模型。

FileReader對象方法

方法說明readAsText將文本讀取為“文本”readAsDataURL將文本讀取為"DataURL"readAsBinaryString()將文本讀取為“二進制編碼“readAsArrayBuffer()將文本讀取為一個”ArrayBuffer對象“abort()中止讀取操作

FileReader對象事件

事件說明onabort中斷時觸發(fā)onerror出錯時觸發(fā)onload文件讀取成功完成時觸發(fā)onloadend讀取完成觸發(fā)，無論成功或失敗onloadstart讀取開始時觸發(fā)onprogress在讀取數(shù)據(jù)過程中周期性調用

柚子快報激活碼778899分享：前端 HTML5-簡單文件操作

http://yzkb.51969.com/

相關文章