即時(shí)預(yù)覽案例中的FileReader
FileReader:讀取文件內(nèi)容
? * 1.readAsText():讀取文本文件(可以使用Txt打開的文件)尔觉，返回文本字符串，默認(rèn)編碼是UTF-8
* 2.readAsBinaryString():讀取任意類型的文件统阿。返回二進(jìn)制字符串目尖。這個(gè)方法不是用來讀取文件展示給用戶看吨瞎，而是存儲(chǔ)文件炫贤。例如：讀取文件的內(nèi)容爷恳，獲取二進(jìn)制數(shù)據(jù)方篮，傳遞給后臺(tái)名秀，后臺(tái)接收了數(shù)據(jù)之后，再將數(shù)據(jù)存儲(chǔ)
* 3.readAsDataURL():讀取文件獲取一段以data開頭的字符串藕溅，這段字符串的本質(zhì)就是DataURL.DataURL是一種將文件(這個(gè)文件一般就是指圖像或者能夠嵌入到文檔的文件格式)嵌入到文檔的方案匕得。DataURL是將資源轉(zhuǎn)換為base64編碼的字符串形式，并且將這些內(nèi)容直接存儲(chǔ)在url中>>優(yōu)化網(wǎng)站的加載速度和執(zhí)行效率。
* abort():中斷讀取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$$</title>
</head>
<body>
<!--即時(shí)預(yù)覽案例-->
<form action="">
<input type="file" name="myFile" id="myFile" onchange="getFileContent()"><br />
<div></div>
<img src="" alt="" style="width:50px;height: 50px">
<input type="submit">
</form>
<script>
function getFileContent(){
var reader = new FileReader();
var file = document.querySelector("#myFile").files;//獲取圖片文件汁掠，得到的是一個(gè)數(shù)組（因?yàn)榭梢酝瑫r(shí)選擇多張圖片）（圖片文件存儲(chǔ)在input標(biāo)簽中的files屬性中）
reader.readAsDataURL(file[0]);//調(diào)用方法轉(zhuǎn)為base64編碼的字符串形式
reader.onload = function(){//文件讀取成功完成時(shí)觸發(fā)
document.querySelector("img").src = reader.result;//將讀取結(jié)果賦值給img的src屬性（讀取結(jié)果存放在result中）
}
}
</script>
</body>
</html>
2.讀取文件略吨，獲取DataURL
* 2.1.說明沒有任何的返回值:void：但是讀取完文件之后，它會(huì)將讀取的結(jié)果存儲(chǔ)在文件讀取對(duì)象的result中
* 2.2.需要傳遞一個(gè)參數(shù) binary large object:文件(圖片或者其它可以嵌入到文檔的類型)
* 2.3:文件存儲(chǔ)在file表單元素的files屬性中考阱，它是一個(gè)數(shù)組
獲取數(shù)據(jù)
FileReader提供一個(gè)完整的事件模型翠忠，用來捕獲讀取文件時(shí)的狀態(tài)
* onabort:讀取文件中斷片時(shí)觸發(fā)
* onerror:讀取錯(cuò)誤時(shí)觸發(fā)
* onload:文件讀取成功完成時(shí)觸發(fā)
* onloadend:讀取完成時(shí)觸發(fā)，無論成功還是失敗
* onloadstart:開始讀取時(shí)觸發(fā)
* onprogress:讀取文件過程中持續(xù)觸發(fā)
