TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超6個(gè)贊
我的原理就是和上傳預(yù)覽差不多，簡(jiǎn)單說(shuō)下:
onchange觸發(fā)，獲取當(dāng)前file對(duì)象(這里可以獲取圖片的大小、類型、修改時(shí)間等)
reader去讀取文件
塞到頁(yè)面，獲取圖片的寬高
移出圖片節(jié)點(diǎn)
代碼，見(jiàn)以下：
<input type="file" onchange="getImgInfo(this,getImgInfoCb)"/>
function getImgInfo(ev,fnCallBack){
var oFile=ev.files[0];
var reader=new FileReader();
reader.onload=function(){
// 也可以用 window.URL.createObjectURL(this.result)
var oImg=new Image();
oImg.src=this.result;
document.body.appendChild(oImg);
oImg.onload=function(){
var imgWidth=oImg.offsetWidth;
var imgHeight=oImg.offsetWidth;
fnCallBack && fnCallBack({
width:imgWidth,
height:imgHeight
})
document.body.removeChild(oImg);
};
};
reader.readAsDataURL(oFile);
}
function getImgInfoCb(json){
console.log(`width:${json.width} , height:${json.height}`);
}
舉報(bào)