shaolin

悟已往之不谏,知来者之可追!

0%

前端校验图片尺寸

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

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

先上完美运行的代码

以下是我亲测可以运行的代码。连我这种前端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]);