這篇文章主要記錄最近實習(xí)工作中遇到的前端檢查圖片尺寸的問題，在這個過程明白的一些道理。
我由于目前的水平有限，只能借助網(wǎng)絡(luò)來完成這個功能。在這個查找的過程中，發(fā)現(xiàn)很多博客都寫的有問題，雖然表面完成了，但是一測試，很多不對的地方，感覺都是抄的別人的，沒抄完整。
那么我希望我寫的文章，讀者都是可以完美復(fù)寫的。
先上完美運行的代碼
以下是我親測可以運行的代碼。連我這種前端0.1年的人都能學(xué)會。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
function setImg() {
var docObj = document.getElementById("imgPath"); //獲得上傳的文件的數(shù)組形式
var files = document.getElementById("imgPath").value;
console.log(docObj.files)
console.log(files)
if (docObj.files && docObj.files[0]) {
var img = new Image();
img.onload = function(){
var width = img.width; //圖片的寬
var height=img.height; //圖片的高
var filesize = img
console.log(width)
console.log(height)
console.log(filesize)
if (width != 257 || height != 100){
alert('圖片尺寸不符合規(guī)范，請更新寬高比為257*100的圖片');
} else{
//后續(xù)代碼
}
if(docObj.files[0].size > maxSize){
alert('您上傳的圖片大小超過了50k，請更新符合規(guī)范的圖片');
}
};
img.onerror=function(){
alert("error!");
};
img.src=window.URL.createObjectURL(docObj.files[0]);
console.log(img.src);
}
}
</script>
</head>
<body>
<input id="imgPath" type="file" onchange="setImg()"/>
</body>
</html>
上述代碼的image和file的操作在歷經(jīng)尋找多個不合適的博客之后終于成功了。
File API以及Image對象
如果input的type=file，就可以選擇文件從本地上傳到網(wǎng)頁。
讀取文件內(nèi)容按照MDN操作files的方法如下所示
-
1.使用普通的類選擇器選擇要操作的input元素里面的文件
var files = document.getElementById('imgpath').files;
要注意獲得的是一個file的數(shù)組?。?！
files數(shù)組的內(nèi)容.png
如果只要一個文件，就可以用var file = files[0];獲得file的所有信息。
input元素后面寫上multiple，就可以上傳多個文件。同理多個文件的第一個文件也使用這個方法。
- 2.通過change事件來訪問被選擇的文件，即為onchange綁定一個函數(shù)
只要用戶選擇了一個文件，那么就會傳入這個file對象。 - 3.再創(chuàng)建一個image對象，一定要先onload。
- 4.給img賦上地址img.src=window.URL.createObjectURL(docObj.files[0]);
