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

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

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

*/

/**
?* FileReader() 構(gòu)造函數(shù)
?*?
?* 屬性
?* ? ? ?FeileReader.error只讀，表示讀取文件失敗時(shí)發(fā)生的錯(cuò)誤
?* ? ? ?FeileReader.readyState只讀，readyState代表數(shù)字，狀態(tài)
?* ? ? ? ? EMPTY => 0 => 還未加載任何數(shù)據(jù) ?
?* ? ? ? ? LOADINF => 1 => 正在加載
?* ? ? ? ? DONE => 2 => 已經(jīng)全部讀取完成
?* ? ? ?FeileReader.result只讀，
?* ? ? ? ? ?文件的內(nèi)容，這個(gè)屬性要在讀取完成(也就是readyState變?yōu)?時(shí))后才有效。
?*?
?* 事件處理事件
?* ? ? ?FeileReader.onabort?
?* ? ? ? ? ?處理abort事件，在讀取操作中如果要中斷(終止)執(zhí)行的事件
?* ? ? ?FeileReader.error
?* ? ? ? ? ?在讀取時(shí)如果發(fā)生錯(cuò)誤時(shí)會(huì)觸發(fā)
?* ? ? ?FeileReader.onload
?* ? ? ? ? ?處理load事件，在讀取操作完成時(shí)觸發(fā)的(成功時(shí)若有提示框彈出成功等字樣，寫在這里)
?* ? ? ? ? ?FeileReader.onload = function(){}
?* ? ? ?FeileReader.onloadStart?
?* ? ? ? ? ?在開始讀取的時(shí)候觸發(fā)
?* ? ? ?FeileReader.onloadEnd
?* ? ? ? ? ?在讀取操作結(jié)束的時(shí)候觸發(fā)
?* ? ? ?FeileReader.onProgess
?* ? ? ? ? ?該事件在讀取blob時(shí)觸發(fā)
?*?
?* 方法
?* ? ? ?FeileReader.abort()
?* ? ? ? ? ?中止讀取操作。在返回時(shí)，readyState屬性為DONE。
?* ? ? ?FeileReader.readAsArrayBuffer()
?* ? ? ? ? ?開始讀取指定的Blob中的內(nèi)容，一旦完成，result屬性中保存的將是被讀取文件的ArrayBuffer數(shù)據(jù)對(duì)象
?* ? ? ?FileReader.readAsBinaryString()
?* ? ? ? ? ?開始讀取指定的Blob中的內(nèi)容，一旦完成，result屬性中將包含所讀取文件的原始二進(jìn)制數(shù)據(jù)
?* ? ? ?FileReader.readAsDataURL()
?* ? ? ? ? ?開始讀取指定的Blob中的內(nèi)容，一旦完成，result屬性中將包含一個(gè)data: URL格式的Base64字符串表示所讀取文件的內(nèi)容
?* ? ? ? ? ?1. readAsDataURL?
?* ? ? ? ? ?方法會(huì)讀取指定的 Blob 或 File 對(duì)象。讀取操作完成的時(shí)候，readyState 會(huì)變成已完成DONE，并觸發(fā) loadend 事件，
?* ? ? ? ? ?同時(shí) result 屬性將包含一個(gè)data:URL格式的字符串（base64編碼）以表示所讀取文件的內(nèi)容。
?* ? ? ? ? ?參數(shù): 即將被讀取的 Blob 或 File 對(duì)象。
?* ? ? ?FileReader.readAsText()?
?* ? ? ? ? ?開始讀取指定的Blob中的內(nèi)容，一旦完成，result屬性中將包含一個(gè)字符串來(lái)表示讀取的文件內(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(); // 返回一個(gè)新的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])
}