JS获取上传图片的尺寸和大小

最近工作要用到上传文件时限制上传图片大小这个功能，于是开始找类似的文章，看了很多东西，最后结果到也还可以。

目前来说，谷歌，火狐，IE系列的7,8,9都已经过测试，可以获取到上传图片的原尺寸。接下来上代码。

第一种方法需要支持H5，思路是先将图片进行预览，然后不对图片进行任何渲染，包括CSS，JS，然后去获取预览图片的尺寸，当然，如果不想预览的话可以将img

标签隐藏掉。

<div><div><input type="text" disabled="disabled" value="建议规格（200*200）"/></div><form id="upload" action="<%=basePath%>tools?fileUpload" method="post" enctype="multipart/form-data"><input type="file" accept="image/*" id="file"/><input type="button" value="提交" onclick="sub()"/></form><img id="preview" style="display:none" onload="img(this)"/>
</div>这是页面的标签，ID为“preview”的img标签用于进行预览，以及在script块里面获取数据<script type="text/javascript">$(function () {//调用插件进行预览$("#file").uploadPreview({ Img: "preview"});});
</script>
<script type="text/javascript">var imgWidth, imgHeight;//获取图片宽高function img(obj){//只支持谷歌火狐imgWidth = obj.width;imgHeight = obj.height;alert(obj.width);alert(obj.height);}
</script>
<script type="text/javascript">function sub(){var a = $("#file").get(0).files[0];//需支持H5//获取文件大小 单位B//console.log(a.size);//对图片的宽和高进行判断if(parseInt(imgWidth)>200||parseInt(imgHeight)>200){alert("图片规格超出200");return false;}//$("#upload").submit();}
</script>这里用了三段代码进行，第一段就是对上传图片进行预览（写入img标签），第二段则是在img标签onload之后对获取图片本身，并获取图片的尺寸，第三段则是对图片的尺寸进行操作了。这个方法需要jquery和另一个js文件的支持，并且jquery的版本不能高于1.8，否则有些东西就无法使用。接下来就是IE系列了，IE系列则是比较麻烦，而且也是找了好久才找到的。哦对了，第一种方法好像可以支持IE最新的那款浏览器。看代码。。。<div><h1>IE兼容测试</h1><div id="preview_wrapper"><div id="preview_fake"><img id="preview" onload="onPreviewLoad(this)" border="1"/></div></div><br/><input id="upload_img" type="file" onchange="onUploadImgChange(this)"/><br/><img id="preview_size_fake" border="1"/>
</div>这是页面的代码。<script type="text/javascript">
function onUploadImgChange(sender){if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){alert('图片格式无效！');return false; } var objPreview = document.getElementById( 'preview' ); var objPreviewFake = document.getElementById( 'preview_fake' ); var objPreviewSizeFake = document.getElementById( 'preview_size_fake' ); if( sender.files && sender.files[0] ){objPreview.style.display = 'block'; objPreview.style.width = 'auto'; objPreview.style.height = 'auto'; // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径 objPreview.src = sender.files[0].getAsDataURL();}else if( objPreviewFake.filters ){// IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果 //（相同环境有时能显示，有时不显示），因此只能用滤镜来解决 // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径 sender.select(); var imgSrc = document.selection.createRange().text; objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc; objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc; autoSizePreview( objPreviewFake,  objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight ); alert(objPreviewSizeFake.offsetWidth);     ----------------获取图片尺寸alert(objPreviewSizeFake.offsetHeight);     -------------- 获取图片尺寸objPreview.style.display = 'none'; }
}function onPreviewLoad(sender){ autoSizePreview(sender, sender.offsetWidth, sender.offsetHeight );
}function autoSizePreview( objPre, originalWidth, originalHeight ){ var zoomParam = clacImgZoomParam( 300, 300, originalWidth, originalHeight ); objPre.style.width = zoomParam.width + 'px';objPre.style.height = zoomParam.height + 'px';objPre.style.marginTop = zoomParam.top + 'px';objPre.style.marginLeft = zoomParam.left + 'px';
}function clacImgZoomParam( maxWidth, maxHeight, width, height ){ var param = { width:width, height:height, top:0, left:0 }; if( width>maxWidth || height>maxHeight ){ rateWidth = width / maxWidth; rateHeight = height / maxHeight; if( rateWidth > rateHeight ){ param.width = maxWidth; param.height = height / rateWidth; }else{ param.width = width / rateHeight; param.height = maxHeight; } } param.left = (maxWidth - param.width) / 2; param.top = (maxHeight - param.height) / 2; return param;
}
</script>

这里面已经有一部分说明就不再细说，因为是自己先用来测试的，所以现在是实现了需求，具体的好多东西都还没有调整，比如IE获取到尺寸之后下面会多出一块空白。到目前为止第二种方法已经可以在IE的7,8,9三个版本上面获取到尺寸。

目前来说，卡在了IE10上面，这几天有些事情停止继续寻找办法了。等到找到方法之后会回来继续更新的。刚刚找了下发现博客并不支持上传文件，所以在这里把js文件的名字说一下。《《《《《《《《《《《《《《《《prelook.js》》》》》》》》》》》》》》》算不上原创，大多是从网上找来的，发在这里第一是留个纪念，第二是不定什么时候会再用到，做个保存。

JS获取上传图片的尺寸和大小相关推荐

php 获取远程图片尺寸,PHP高效获取远程图片尺寸和大小的实现方法
原标题:PHP高效获取远程图片尺寸和大小的实现方法 PHP高效获取远程图片尺寸和大小的实现方法在这里分享一下自己的心得,希望和大家一起分享技术,如果有什么不足,还请大家指正.写出这篇目的,就是希望大 ...
php获取网络图片的大小,PHP获取远程图片尺寸和大小实例演示
这篇文章主要为大家详细介绍了PHP获取远程图片尺寸和大小实例演示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. PHP功能强大,今天361源码给大家介绍的是: ...
PHP高效获取远程图片尺寸和大小(转)
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 3 ...
PHP高效获取远程图片尺寸和大小
/*** 获取远程图片的宽高和体积大小** @param string $url 远程图片的链接* @param string $type 获取远程图片资源的方式, 默认为 curl 可选 fread ...
JS获取上传文件的大小
js中获取文件的大小,判断文件是否操作大小限制,避免到后台报错. 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 2 ...
【JS】 # js获取当前日期，比较日期大小
通过 JS 在前台页面获取当前日期,比较时间的大小 // 获取当前时间,格式YYYY-MM-DD function getNowFormatDate() {var date = new Date(); ...
分享一个js获取图片原始尺寸的方法。亲测，好用！！！
首先,大部分人和网上能搜索到的获取图片分辨率或尺寸的方法,应该都是这样: let url = 'url';function getUrlInfo(url) {let image = new Image ...
js 获取上传图片和视频的宽高，还有视频的时长
场景: 当产品经理告诉你说:我们需要限制上传的图片或视频的尺寸,不符合要求不允许上传,这个时候你该怎么做? 不用多想,很明显我们需要想办法拿到图片或视频的宽度,然后和预期的尺寸进行对比过滤,就能轻易实 ...
js获取浏览器窗口可视区域大小
获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerHeight - 浏 ...

JS获取上传图片的尺寸和大小

JS获取上传图片的尺寸和大小相关推荐

最新文章

热门文章