<input type="file" id="fielinput" />
<img id="txshow" style="width:100px;height:100px;"/>
<br/>解析之后的base64數(shù)據(jù)：<br/>
<p id="data"></p>

/***
?*?
?* FileReader 對象允許Web應(yīng)用程序異步讀取存儲在用戶計算機上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，
?* 使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。

? ?其中File對象可以是來自用戶在一個<input>元素上選擇文件后返回的FileList對象,
? ?也可以來自拖放操作生成的 DataTransfer對象,還可以是來自在一個HTMLCanvasElement上執(zhí)行mozGetAsFile()方法后返回結(jié)果

*/

/**
?* FileReader() 構(gòu)造函數(shù)
?*?
?* 屬性
?* ? ? ?FeileReader.error只讀，表示讀取文件失敗時發(fā)生的錯誤
?* ? ? ?FeileReader.readyState只讀，readyState代表數(shù)字，狀態(tài)
?* ? ? ? ? EMPTY => 0 => 還未加載任何數(shù)據(jù) ?
?* ? ? ? ? LOADINF => 1 => 正在加載
?* ? ? ? ? DONE => 2 => 已經(jīng)全部讀取完成
?* ? ? ?FeileReader.result只讀，
?* ? ? ? ? ?文件的內(nèi)容，這個屬性要在讀取完成(也就是readyState變?yōu)?時)后才有效。
?*?
?* 事件處理事件
?* ? ? ?FeileReader.onabort?
?* ? ? ? ? ?處理abort事件，在讀取操作中如果要中斷(終止)執(zhí)行的事件
?* ? ? ?FeileReader.error
?* ? ? ? ? ?在讀取時如果發(fā)生錯誤時會觸發(fā)
?* ? ? ?FeileReader.onload
?* ? ? ? ? ?處理load事件，在讀取操作完成時觸發(fā)的(成功時若有提示框彈出成功等字樣，寫在這里)
?* ? ? ? ? ?FeileReader.onload = function(){}
?* ? ? ?FeileReader.onloadStart?
?* ? ? ? ? ?在開始讀取的時候觸發(fā)
?* ? ? ?FeileReader.onloadEnd
?* ? ? ? ? ?在讀取操作結(jié)束的時候觸發(fā)
?* ? ? ?FeileReader.onProgess
?* ? ? ? ? ?該事件在讀取blob時觸發(fā)
?*?
?* 方法
?* ? ? ?FeileReader.abort()
?* ? ? ? ? ?中止讀取操作。在返回時，readyState屬性為DONE。
?* ? ? ?FeileReader.readAsArrayBuffer()
?* ? ? ? ? ?開始讀取指定的Blob中的內(nèi)容，一旦完成，result屬性中保存的將是被讀取文件的ArrayBuffer數(shù)據(jù)對象
?* ? ? ?FileReader.readAsBinaryString()
?* ? ? ? ? ?開始讀取指定的Blob中的內(nèi)容，一旦完成，result屬性中將包含所讀取文件的原始二進(jìn)制數(shù)據(jù)
?* ? ? ?FileReader.readAsDataURL()
?* ? ? ? ? ?開始讀取指定的Blob中的內(nèi)容，一旦完成，result屬性中將包含一個data: URL格式的Base64字符串表示所讀取文件的內(nèi)容
?* ? ? ? ? ?1. readAsDataURL?
?* ? ? ? ? ?方法會讀取指定的 Blob 或 File 對象。讀取操作完成的時候，readyState 會變成已完成DONE，并觸發(fā) loadend 事件，
?* ? ? ? ? ?同時 result 屬性將包含一個data:URL格式的字符串（base64編碼）以表示所讀取文件的內(nèi)容。
?* ? ? ? ? ?參數(shù): 即將被讀取的 Blob 或 File 對象。
?* ? ? ?FileReader.readAsText()?
?* ? ? ? ? ?開始讀取指定的Blob中的內(nèi)容，一旦完成，result屬性中將包含一個字符串來表示讀取的文件內(nèi)容
?* ?
?*?
?*?
?* **/
var input = document.getElementById("fielinput");
input.addEventListener('change', readFile, false);
function readFile() {
? ?var file = this.files[0];
? ? //判斷是否是圖片類型
? ? /*if (!/image\/\w+/.test(file.type)) {
? ? ?alert("只能選擇圖片");
? ? ?return false;
? ? ?}*/
? ? var reader = new FileReader(); // 返回一個新的FileReader函數(shù)
? ? reader.readAsDataURL(file);
? ? reader.onloadstart = function (e){?
? ? ? ? console.log(e)
? ? ? ? console.log('開始了')
? ? }
? ? reader.onprogress = function(e){
? ? ? ? console.log(e)
? ? }
? ? reader.onload = function (e) {
? ? ? ? console.log(e);
? ? ? ? console.log(reader.result);
? ? ? ? txshow.src = this.result;
? ? ? ? document.getElementById("data").innerText=this.result.substring(this.result.indexOf(',')+1);
? ? }
? ? reader.onloadend = function(e){
? ? ? ? console.log(e)
? ? ? ? console.log('結(jié)束了')
? ? }
}

function fileFormData(files){
? ? console.log(this.files[0])
? ? console.log(files.target.files[0])
}