js 判断上传图片尺寸大小(var img =new Image())_js判断图片尺寸-优快云博客

本文链接：https://blog.youkuaiyun.com/dcb_ripple/article/details/52175842

本文介绍如何使用JavaScript在前端实现图片尺寸验证，包括利用img标签和Image对象获取图片尺寸的方法，并提供了一个具体的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上传时常常会碰到限制图片尺寸的需求，而在后台通过byte判断大小，虽可行，但如果在JS中判断显然是更好的选择，尤其是在不限制文件大小，只限制尺寸时。

通常会使用创建Image对象，或添加一个<img>来获取，

1.img标签方式

    <input type="button" onclick="uploadFile()" value="验证" />
    <img id="imgShow" src="img.png"  /><pre name="code" class="javascript">

    function uploadFile()
        {
            var imgWidth = document.getElementById("imgShow").width;
            var imgHeight = document.getElementById("imgShow").height;
            alert("宽度:"+imgWidth)
            alert("高度:"+imgHeight)
        }

效果图，测试结果：

由此可见，既然Img标签中的图片高宽均能获取，换句话说在文件上传时我们可以使用JS动态的创建一个Img对象，然后在获取高度宽度进行判断。

2. js 中的Image对象

创建一个Image对象： var a=new Image(); 定义Image对象的src: a.src =”xxx.gif”; 这样做就相当于给浏览器缓存了一张图片。

图像对象：

建立图像对象：图像对象名称=new Image([宽度],[高度])

图像对象的属性： border complete height hspace lowsrc name src vspace width

图像对象的事件：onabort onerror onkeydown onkeypress onkeyup onload

Imge对象：http://www.runoob.com/jsref/dom-obj-image.html

根据此可得知简单代码为：

           var img = new Image;
           img.src = "xxxx";    //浏览器中可以直接访问到的<span style="font-family: Arial, Helvetica, sans-serif;">图片</span><span style="font-family: Arial, Helvetica, sans-serif;">地址</span>
           alert(img.height);

但，这样会发现它迟迟未达到我们想要的效果，发现在获取高度时总为0；原因是，我们只创建了一个Image对象，并未将此对象load到浏览器中，也就是说此时浏览器是无法访问到该图片的，那么它自然无法获取成功。

再将代码更改为：

var img=new Image();  
    img.onload=function(){alert(img.height);};  
    img.onerror=function(){alert("error!")};  
    img.src="xxxxxx";  
    function show(){alert("body is loaded");};  
    window.onload=show;

需要注意的是：src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错。

运行上面的代码后，在不同的浏览器中进行测试，发现 IE 和 FF 是有区别的，在 FF 中，img 对象的加载包含在 body 的加载过程中，既是 img加载完之后，body 才算是加载完毕，触发 window.onload 事件。在 IE 中，img 对象的加载是不包含在 body 的加载过程之中的，body 加载完毕，window.onload 事件触发时，img对象可能还未加载结束，img.onload事件会在 window.onload 之后触发。如若src中的URL路劲可以通过浏览器访问到，则程序会运行成功，可以获取到高度以及宽度

但是在上传文件时，我们普遍不能直接地得到当前上传文件的URL地址，所以当以上程序放在文件上传中时会发现，仍旧无法运行。

比如如下情况：

通过上面可以看到，虽然它获取到了URL路径，但它却不是当前所选择的原路径，也就是说这个地址在浏览器中是无法访问到的，结果自然报错。

所以，将代码更改如下：

<pre name="code" class="javascript"><!DOCTYPE html>
<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;
            if (null == files || '' == files) {
    			$.messager.alert('温馨提示','请上传图片封面信息。','info');
    			return;
    		}
    		 if(!uploadType(finals(files,"suffix"))){
    			 $.messager.alert('温馨提示','请上传bmp,png,gif,jpeg,jpg格式的图片','info'); 
    			 return false;
    		 };
    		 
    		 if(!uploadfinaName(finals(files,"fileName"))){
    			 $.messager.alert('温馨提示','上传失败，文件名称只能由“数字”、“字母”、或“_”组成','info'); 
    			 return false;
    		 };
    		 
            if (docObj.files && docObj.files[0]) {
            	 var img = new Image;
        		img.onload = function(){        
        		    alert(img.height);
        		    
     	   			var width = img.width;
     	   			var height=img.height;
     	   			var filesize = img
     	   			if(width!=480 || height!=1008){
     	   			    alert("图片尺寸不符合，请重新上传....");
     	   			}else{
     	   				//后续操作  提交代码
     	   			}
        		};
     	   		img.onerror=function(){
     	   	    	alert("error!");
     	   	    };
     	   	    img.src=window.URL.createObjectURL(docObj.files[0]);
            }   
        }
    </script>
  </head>
<body>
    <input id="imgPath" type="file"  onchange="setImg()"/>
</body>
</html>

整体代码运行成功，img.src=window.URL.createObjectURL(docObj.files[0]); 此段代码按照他人说法是，将地址转化成XX进制（不懂）的URL地址。

注意：此处得到的图片尺寸，并非是真正意义上的得到尺寸分辨率，而是将它封装成了一个Img，然后在得出Img对象的大小，所以并未直接得到。

在多文件上传时，此方法可能会变得不经用。

我的做法：

1.图片上传至服务器(tomcat 本地的也行)，返回上传的信息内容。

2.通过JS得到当前服务器中存放的图片路径，通过path+imaName 得到当前图片在服务器中的URL。

3.通过Image对象创建的方式，将得到的URL丢入，创建对象判断。

4.不通过，直接传入URL至后台，删除文件。

5.通过，后台返回的内容信息，AJAX写入数据库。

================================================================================================

了解的，就只有这么多了，

另外，我使用的多文件上传插件是 Uploadify