盒子
盒子
文章目录
  1. 先上完美运行的代码
  2. File API以及Image对象

前端校验图片尺寸

这篇文章主要记录最近实习工作中遇到的前端检查图片尺寸的问题,在这个过程明白的一些道理。

我由于目前的水平有限,只能借助网络来完成这个功能。在这个查找的过程中,发现很多博客都写的有问题,虽然表面完成了,但是一测试,很多不对的地方,感觉都是抄的别人的,没抄完整。
那么我希望我写的文章,读者都是可以完美复写的。

先上完美运行的代码

以下是我亲测可以运行的代码。连我这种前端0.1年的人都能学会。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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]);