600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > js 判断上传图片尺寸大小(var img =new Image())

js 判断上传图片尺寸大小(var img =new Image())

时间:2018-08-09 16:27:04

相关推荐

js 判断上传图片尺寸大小(var img =new Image())

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

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

1.img标签方式

<input type="button" οnclick="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对象:/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.οnlοad=function(){alert(img.height);}; img.οnerrοr=function(){alert("error!")}; img.src="xxxxxx"; function show(){alert("body is loaded");}; window.οnlοad=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="/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 = imgif(width!=480 || height!=1008){alert("图片尺寸不符合,请重新上传....");}else{//后续操作 提交代码}};img.οnerrοr=function(){alert("error!");};img.src=window.URL.createObjectURL(docObj.files[0]);} }</script></head><body><input id="imgPath" type="file" οnchange="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 具体可查看: /oec/archive//01/06/1640027.html#!comments ajax 文件上传: /blog/2095541

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。