昨天接到一個需求锭硼，一個營銷人員做線下活動，想弄一個人臉識別認證的功能蜕劝。剛開始聽檀头，wtf轰异，H5能人臉識別？暑始？搭独？后來老大說找第三方做，我們只負責傳數(shù)據(jù)就行廊镜，松了一口氣牙肝，不然又要加班了。所謂的數(shù)據(jù)就是用戶的照片或視頻嗤朴。這就涉及到本地文件的讀取了配椭，或者調(diào)用攝像頭。突然想到了HTML5的FileReader這個api雹姊，試了試股缸，還行，滿足需求吱雏。不熟悉這個api的敦姻，==>>傳送門
好了，廢話不多少坎背，來個開胃菜
<input type='file' id='file' accept='image/*,video/*' capture='' />
accept這個屬性表示可以接受的文件類型替劈，多個類型用 ,隔開寄雀。
接下來就是重點了得滤，有了HTML，js當然不能少盒犹。
document.getElementById('file').onchange = fucntion(e){
var file = e.target.files[0],
reader = new FileReader(),
result = '';
if(file){
reader.readAsDataURL(file)
}
reader.onabort = function(){
//讀取中斷
};
reader.onerror = function(){
//讀取發(fā)生錯誤
};
reader.onload = function(){
if(reader.readyState == 2){
result = reader.result
}
}
}
這就是簡單的實現(xiàn)過程懂更。通過 file,也可以得到文件的 size, name等屬性，有興趣的可以log以下急膀。
上面的 e.target.files[0]也可以寫成 this.files[0],習慣而已沮协，蘿卜青菜～
讀取本地文件，可能是image文件卓嫂，可能是video文件慷暂，也有可能是txt文件,audio文件或者doc 文件，所以根據(jù) file.type就可以判斷出讀取的文件類型晨雳，寫一個栗子：
if (/image\/\w+/.test(file.type)) {
alert('這是圖片文件')
}
當然行瑞，你也可以根據(jù) file.type判斷出文件的格式。小栗子：
var fmt = file.type.split('/')[1];//fmt即為文件格式
FileReader是HTML5 新的API餐禁，所以血久，某些瀏覽器或許不支持，所以加一個兼容性帮非。
if(typeof FileReader != 'undefined'){
//your codes
}else{
alert('你的瀏覽器太完蛋')
}
MDN的FileReader的文檔明確寫出了FileReader對象會異步讀取本地文件氧吐，所以為了不阻塞當前線程讹蘑，采用了事件模型，相關的事件還有
FileReader.onabort
處理 abort事件筑舅。該事件在讀取操作被中斷時觸發(fā)
FileReader.onerror
處理 error事件座慰。該事件在讀取操作發(fā)生錯誤時觸發(fā)
FileReader.onload
處理 load事件。該事件在讀取操作完成時觸發(fā)
FileReader.onloadstart
處理 loadstart事件翠拣。該事件在讀取操作開始時觸發(fā)
FileReader.onloadend
處理 loadend事件角骤。該事件在讀取操作結(jié)束時（要么成功，要么失斝陌）觸發(fā)
開發(fā)過程中邦尊，這五種讀取事件應該用到最多。
還有一點优烧，由于是異步讀取蝉揍，類似ajax請求返回的statecode,所以上面 reader.onload函數(shù)中 readyState == 2代表讀取成功返回的statecode,跟ajax中onreadystatechange方法中的 readyState和 status意思差不多。相類似的statecode還有：
readyState == 0代表empty, 還沒有加載任何數(shù)據(jù).
readyState == 1代表loading , 數(shù)據(jù)正在被加載.
readyState == 2代表done, 已經(jīng)完成所有的讀取請求
所以根據(jù)以上事件模型和狀態(tài)碼畦娄，可以寫出一套完整的讀取文件狀態(tài)的邏輯又沾。
說到文件讀取了，如果是image文件熙卡，還要涉及到預覽杖刷，來一個html
<img src='' alt='' id='img' />
上面 reader.onload中已經(jīng)得出result的值，這個值是base64以后的圖片流驳癌。
document.getElementById('img').setAttribute('src',result)即可預覽讀取的圖片滑燃。
以上都是個人理解，如有錯誤颓鲜，請留言指出表窘，謝謝??
