場景：
用戶提交數(shù)據(jù)時(shí)上傳圖片，預(yù)覽在網(wǎng)頁上（還未傳至服務(wù)器）
原理：
用上傳文件的File對象創(chuàng)建一個(gè)url路徑杨拐，賦值給img的src屬性
注意：
- 這個(gè)url路徑在窗口關(guān)掉后失效
- 這是一個(gè)試驗(yàn)中的功能祈餐，IE10以下不支持哄陶，具體詳見MDN文檔
步驟1：
在HTML中帆阳，在input前面或后面寫一個(gè)src為空的<img>用來放預(yù)覽圖
<input type=”file”>
<img src=”” alt=””>
步驟2：
在JS中，創(chuàng)建事件源為input[type=’file’]的onchange事件
說明：
一旦選擇（變更）了本地上傳的圖片文件屋吨，則觸發(fā)此事件蜒谤，讓瀏覽器將本地圖片讀取到頁面上，實(shí)現(xiàn)圖片預(yù)覽至扰。
document.querySelect(‘’input[type=file]”).onchange=function(){
}
步驟3：
寫事件鳍徽，為對象創(chuàng)建路徑并賦值
說明：
- 這個(gè)函數(shù)（window的方法）創(chuàng)建出路徑，瀏覽器能通過原生接口訪問本地文件的路徑敢课，其中window可以省略阶祭，參數(shù)為需要?jiǎng)?chuàng)建路徑的dom元素绷杜。
objectURL=window.URL.creatObjectURL(file或blob) -
input[type=’file’]選擇文件后會(huì)返回一個(gè)File對象，為this.files[0]濒募； - 將這個(gè)對象作為參數(shù)傳入創(chuàng)建路徑的函數(shù)中鞭盟；
- 路徑創(chuàng)建為
imgUrl = URL.ObjectURL(this.files[0])； - 賦值給圖片的src
document.querySelector('input[type=file]').onchange=function(){
var imgUrl = URL.createObjectURL(this.files[0]);
document.querySelector('img').src = imgUrl ;
}
注意：
傳入的參數(shù)應(yīng)為dom元素瑰剃。所以在jQuery中書寫時(shí)齿诉，也用this即可，不要用$(this)晌姚。
this是DOM粤剧，$(this)是jQuery對象。
2018.1.4
