HTML5的File API讀取文件信息

html結構：

<div id="fileImage"></div>
    <input type="file" value="upload" id="fileInput">
    <p id="fileInfo"></p>

css樣式：

 #fileImage{width: 300px;height: 300px; margin: 20px auto;background-repeat:  no-repeat ;background-position:  left top;background-size: contain; }
        #fileInfo{border: 1px solid #eee;}

js代碼：

var fileInput = document.getElementById("fileInput"),
    fileImage = document.getElementById("fileImage"),
     fileInfo = document.getElementById("fileInfo");
    
    //監聽change事件
    fileInput.addEventListener('change',function(){
        //清空預覽區背景圖片
        fileImage.style.backgroundImage = '';
        //檢查文件是否選擇
        if(!fileInput.value){
            fileInfo.innerHTML = "沒有選擇任何文件";
            return;
        }
        
        //獲取file的引用
        var file = fileInput.files[0];
        
        //獲取file信息
        fileInfo.innerHTML = '文件'+file.name+'<br>'+
                             '大小'+file.size+'<br>'+
                             '修改'+file.lastModifiedDate+'<br>';
        if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif'){
            alert('不是有效的圖片');
            return;
        }
        
        //讀取文件
        var reader = new FileReader();
        reader.onload = function(e){
            var data = e.target.result;
            fileImage.style.backgroundImage = 'url('+data+')';
        }
         // 以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. 規范中還明確規定了各種出錯處理和異常處理，這些內容是同樣重要的：不論對於一套完備的規范，還是對於一個健壯的程序而言 。