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对象
图像对象:
建立图像对象:图像对象名称=new Image([宽度],[高度])
图像对象的属性: border complete height hspace lowsrc name src vspace width
图像对象的事件:onabort onerror onkeydown onkeypress onkeyup onload
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地址,所以当以上程序放在文件上传中时会发现,仍旧无法运行。
比如如下情况:
<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 = 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地址。
js 判断上传图片尺寸大小(var img =new Image())相关推荐
- js实现上传图片类型+大小+尺寸验证
图片类型+大小+尺寸验证 html代码: <input type="file" name="files" id="file" onch ...
- js判断图片尺寸及大小
技术框架:vue + antd-vue 代码: <a-upload name="file" :multiple="true" :showUploadLis ...
- js 判断日期时间大小
参考链接 checkTime = function() { var startTime = document.getElementById("startTime").value; ...
- js判断undefined和null
js判断undefined var exp = undefined; if (typeof(exp) == "undefined") {alert("undefined& ...
- js判断是否在微信浏览器中打开网页
JS判断方法 function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/ ...
- js包含字符串判断(js判断字符串包含某个字符串)
JS代码判断字符串中有多少汉字? 本例的重点是正则表达式的应用步骤.(1)创建一个正则表达式变量"re":(2)使用"re"的"test"方 ...
- js在上传图片前判断大小
js在上传图片前判断大小 这个可以用javascript实现,效果还可以,主要是因为javascript里居然有Image对象,可以取得其属性 <script language=javascri ...
- 基于asp.net + easyui框架,js实现上传图片之前判断图片格式,同时实现预览,兼容各种浏览器+下载...
2019独角兽企业重金招聘Python工程师标准>>> 最近在做图片上传的一个前台页面,上传图片功能虽然很简单,但是需要我们学习的地方很多.在上传图片之前验证图片的格式,并同时实现预 ...
- js判断时间两小时之内_js判断两个时间的大小
js判断两个时间的大小 function checkdate() { //得到日期值并转化成日期格式,replace(//-/g, "//")是根据验证表达式把日期转化成长日期格式 ...
最新文章
- android gdb 命令大全,ndk-gdb | Android NDK | Android Developers
- 新疆兵团开展迎新春“送文化下基层”慰问演出活动
- http预请求options
- C语言 结构体里的元素前面有一点“.”代表什么意思?
- Docker Compose搭建consul群集环境(了解Docker Compose及常用命令,Docker四种网络,Doker指定端口)
- lt;%%gt;创建内联代码块(表达)
- 考研计算机专业课复习,考研中计算机专业课的复习考试.pdf
- RHEL(Red Hat Enterprise Linux)配置YUM源
- JS_17 ES5,ES6
- html(+css)/02/html标记语义应用,html列表与图片的应用
- 【宇宙探秘】物理角度分析,蚂蚁从万米高空掉下会摔死吗?
- VMware 修复 View Planner中的严重RCE 漏洞
- cscd论坛_高压电器第九届电工技术前沿问题学术论坛“先进电磁技术”分论坛及专题征稿...
- SpringMVC中的返回值问题之三返回list类型和map类型
- 截屏自动合成一张长图_拼长图有了新姿势,全自动的截图拼接:Tailor
- Java 菜鸟入门 | Java中的静态变量、实例变量、局部变量和成员变量
- Java 后台做图片压缩的两种方法
- [Noi2010]航空管制
- AttributeError: module ‘win32com.gen_py.00020905-0000-4B30-A977-D214852036FF
- matlab dx dy dt,dx/dt=y,dy/dt=-sinx,求大神帮忙编一个MATL? 爱问知识人
热门文章
- 爱思唯尔-Elsevier期刊的校稿流程记录(Proofs)(海王星Neptune)(遇到问题:latex去掉章节序号)
- 基于webrtc的p2p H265播放器实现二
- wine下使用酷狗2008
- WatchGuard 防火墙封 BT
- 一个Linux用户为360说几句公道话 1
- [随文杂记]收藏一个爆笑笑话。
- ESMM、MMOE-推荐系统小结
- 昨天晚上看到的几个简短小笑话:)
- linux邮件实验,linux邮件服务器实验报告
- ubuntu输入法安装[zz]