这篇文章主要记录最近实习工作中遇到的前端检查图片尺寸的问题，在这个过程明白的一些道理。
我由于目前的水平有限，只能借助网络来完成这个功能。在这个查找的过程中，发现很多博客都写的有问题，虽然表面完成了，但是一测试，很多不对的地方，感觉都是抄的别人的，没抄完整。
那么我希望我写的文章，读者都是可以完美复写的。
先上完美运行的代码
以下是我亲测可以运行的代码。连我这种前端0.1年的人都能学会。
<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"); //获得上传的文件的数组形式
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('图片尺寸不符合规范，请更新宽高比为257*100的图片');
} else{
//后续代码
}
if(docObj.files[0].size > maxSize){
alert('您上传的图片大小超过了50k，请更新符合规范的图片');
}
};
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的操作在历经寻找多个不合适的博客之后终于成功了。
File API以及Image对象
如果input的type=file，就可以选择文件从本地上传到网页。
读取文件内容按照MDN操作files的方法如下所示
-
1.使用普通的类选择器选择要操作的input元素里面的文件
var files = document.getElementById('imgpath').files;
要注意获得的是一个file的数组！！！
files数组的内容.png
如果只要一个文件，就可以用var file = files[0];获得file的所有信息。
input元素后面写上multiple，就可以上传多个文件。同理多个文件的第一个文件也使用这个方法。
- 2.通过change事件来访问被选择的文件，即为onchange绑定一个函数
只要用户选择了一个文件，那么就会传入这个file对象。 - 3.再创建一个image对象，一定要先onload。
- 4.给img赋上地址img.src=window.URL.createObjectURL(docObj.files[0]);
