HTML5的File API讀取檔案資訊

html結構：

<
div 
id="fileimage"
>
div>
<
input 
type
="file"
value
="upload"
id="fileinput"
>
<
p id
="fileinfo"
>
p>

css樣式：

#fileimage#fileinfo

js**：

var fileinput = document.getelementbyid("fileinput"),
fileimage = document.getelementbyid("fileimage"),
fileinfo = document.getelementbyid("fileinfo");
//監聽change事件
fileinput.addeventlistener('change',function
()        
//獲取file的引用
var file = fileinput.files[0];
//獲取file資訊
fileinfo.innerhtml = '檔案'+file.name+'
'+                             '大小'+file.size+'
'+                             '修改'+file.lastmodifieddate+'
';        
if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif')
//讀取檔案
var reader = new
filereader();
reader.onload = function
(e)         
//以dataurl的形式讀取檔案:
reader.readasdataurl(file);
});

選擇檔案之後可以看到檔案的名稱、大小、修改的時間，也可以預覽。以dataurl的形式讀取到的檔案是乙個字串，類似於data:image/jpeg;base64,/9j/4aaqsk...(base64編碼)...，常用於設定影象。如果需要伺服器端處理，把字串base64,後面的字元傳送給伺服器並用base64解碼就可以得到原始檔案的二進位制內容。以上是使用file api操作檔案的例子，摘自廖老師的js教程。

file api藉口總覽

◆ filelist介面: 可以用來代表一組檔案的js物件，比如使用者通過input[type="file"]元素選中的本地檔案列表

◆ blob介面: 用來代表一段二進位制資料，並且允許我們通過js對其資料以位元組為單位進行「切割」

◆ file介面: 用來代步乙個檔案，是從blob介面繼承而來的，並在此基礎上增加了諸如檔名、mime型別之類的特性

◆ filereader介面: 提供讀取檔案的方法和事件

filelist介面

#filelist[index] // 得到第index個檔案

blob介面

#blob.size // 唯讀特性，資料的位元組數

#blob.slice(start, length) // 將當前檔案切割並將結果返回

file介面

#file.size // 繼承自blob，意義同上

#file.slice(start, length) // 繼承自blob，意義同上

#file.name // 唯讀屬性，檔名

#file.type // 唯讀屬性，檔案的mime型別

#file.urn // 唯讀屬性，代表該檔案的urn，幾乎用不到，暫且無視

filereader方法

#filereader.readasbinarystring(blob/file) // 以二進位制格式讀取檔案內容

#filereader.readastext(file, [encoding]) // 以文字(及字串)格式讀取檔案內容，並且可以強制選擇檔案編碼

#filereader.readasdataurl(file) // 以dataurl格式讀取檔案內容

#filereader.abort() // 終止讀取操作

filereader事件

#filereader.onloadstart // 讀取操作開始時觸發

#filereader.onload // 讀取操作成功時觸發

#filereader.onloadend // 讀取操作完成時觸發(不論成功還是失敗)

#filereader.onprogress // 讀取操作過程中觸發

#filereader.onabort // 讀取操作被中斷時觸發

#filereader.onerror // 讀取操作失敗時觸發

filereader屬性

#filereader.result // 讀取的結果(二進位制、文字或dataurl格式)

#filereader.readystate // 讀取操作的狀態(empty、loading、done)

對fileapi實踐的三點注意

1. 由於規範尚未截稿，#file.urn尚存較大變數，webkit並未實現此特性

2. #blob.slice在webkit核心中加入了字首，即#blob.webkitslice，且第二個引數不是「length」，而是「end」，話句話說，上面的示例二應改為file.webkitslice(3, size)才能生效

3. 規範中還明確規定了各種出錯處理和異常處理，這些內容是同樣重要的：不論對於一套完備的規範，還是對於乙個健壯的程式而言。

HTML5的File API讀取檔案資訊

HTML5 檔案讀取

HTML5的學習（二）HTML5標籤

HTML 5 File API應用例項訪問本地

HTML5的File API讀取檔案資訊

HTML5 檔案讀取

HTML5的學習（二）HTML5標籤

HTML 5 File API應用例項 訪問本地

相關推薦

HTML 5 File API應用例項訪問本地