JS判断图片上传时文件大小和图片尺寸
如何读取图片的size：
首先，原生input file控件有个files属性，该属性是一个数组。数组中的元素有以下属性：lastModifiedDate，name，size，type，webkitRelativePath，如图：
这样的话，我们就可以检测到size。（这里的size是字节大小）
var fileData = file.files[0];
var size = fileData.size; //注意，这里读到的是字节数
var isAllow = false;
var maxSize = Max_Size;
maxSize = maxSize * 1024; //转化为字节
isAllow = size <= maxSize;
– 兼容性：ie9下读不到input file.files这个属性。
如何获取图片的width、height:
1.图片真实的宽度和高度，可以通过实例化Image对象、加载src 来获取。
2.兼容性：IE下使用滤镜来处理图片尺寸控制。
1 <html>
2 <head>
3 <title>测试</title>
4 <meta charset="utf-8"/>
5
6
7 </head>
8 <body>
9
10 <form action="" method="post">
11 <input type="file" id="uploader"/>
12 <input type="submit" id="submit"/>
13 </form>
14 <div id="tip1"></div>
15 <div id="tip2"></div>
16 <script>
17
18
19
20
21
22 var Max_Size = 2000; //2M
23 var Max_Width = 100; //100px
24 var Max_Height = 200; //200px
25
26 $('#submit').on('change',function(ev){
27
28 var fileEl = this;
29
30 console.log(fileEl);
31
32 testMaxSize(fileEl);
33 testWidthHeight(fileEl);
34 })
35
36 function testMaxSize(file){
37 if(file.files && file.files[0]){
38 var fileData = file.files[0];
39
40 var size = fileData.size; //注意，这里读到的是字节数
41 var isAllow = false;
42 if(!size) isAllow = false;
43
44 var maxSize = Max_Size;
45 maxSize = maxSize * 1024; //转化为字节
46 isAllow = size <= maxSize;
47
48 showTip1(isAllow);
49
50 }else{
51 /*... ie9下用iframe上传*/
52 /*
53 // 或者用以面的方式实现
54 // var img = new Image();
55 // 再用img.src=filepath,再用img.fileSize用取，这里不写啦，读者自行实践一下
56 */
57
58 }
59
60 }
61
62 function testWidthHeight(file){
63 var isAllow = false;
64 debugger;
65
66 if(file.files && file.files[0]){
67 var fileData = file.files[0];
68
69 //读取图片数据
70 var reader = new FileReader();
71 reader.onload = function (e) {
72 var data = e.target.result;
73 //加载图片获取图片真实宽度和高度
74 var image = new Image();
75 image.onload=function(){
76 var width = image.width;
77 var height = image.height;
78 isAllow = width >= Max_Width && height >= Max_Height;
79 showTip2(isAllow);
80 };
81 image.src= data;
82 };
83 reader.readAsDataURL(fileData);
84
85 }else{
86 //IE下使用滤镜来处理图片尺寸控制
87 //文件name中IE下是完整的图片本地路径
88 var input = D.get('#uploader');
89 //var input = uploader.get('target').all('input').getDOMNode();
90 input.select();
91 //确保IE9下，不会出现因为安全问题导致无法访问
92 input.blur();
93 var src = document.selection.createRange().text;
94 var img = $('<img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);width:300px;visibility:hidden;" />').appendTo('body').getDOMNode();
95 img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
96 var width = img.offsetWidth;
97 var height = img.offsetHeight;
98 $(img).remove();
99
100 isAllow = width >= Max_Width && height >= Max_Height;
101 showTip2(isAllow);
102 }
103
104 }
105
106 function showTip1(isAllow){
107 var tipEl = D.get('#tip1'),
108 html = '';
109 if(isAllow){
110 html = '大小通过</br>';
111 }else{
112 html = '大小未通过，要求'+ Max_Size +'</br>';
113 }
114 D.html(tipEl,html);
115 }
116
117 function showTip2(isAllow){
118 var tipEl = D.get('#tip2'),
119 html = '';
120
121 if(isAllow){
122 html += '宽高通过';
123 }else{
124 html += '宽高未通过，要求width:'+ Max_Width +', height:'+ Max_Height;
125 }
126 D.html(tipEl,html);
127 }
128
129
130
131
132 </script>
133 </body>
134 </html>
JS判断图片上传时文件大小和图片尺寸的更多相关文章
- iOS:图片上传时两种图片压缩方式的比较
上传图片不全面的想法:把图片保存到本地,然后把图片的路径上传到服务器,最后又由服务器把路径返回,这种方式不具有扩展性,如果用户换了手机,那么新手机的沙盒中就没有服务器返回的图片路径了,此时就无法获取之 ...
- js基础进阶--图片上传时实现本地预览功能的原理
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
- javaweb图片上传 tomcat重新部署 图片消失
标签: 图片上传tomcat重新部署图片消失原因分析以及解决办法 最近在做一个Javaweb的项目,涉及到图片上传,并且需要将图片通过URL回显给JSP页面,在调试的时候发现,上传到tomcat的 ...
- js判断图片上传时的文件大小，和宽高尺寸
今天在做图片上传的小功能,使用了一个kissy上传组件.很好奇它是如何在图片上传前,检测到图片的大小和尺寸的?我们来写个小实例实现一下吧 如何读取图片的size 首先,原生input file控件有个 ...
- 大图片上传(ImageIO,注意有的图片不能上传时因为他是tiff格式)
一下是必要的: 1.enctype="multipart/form-data" 2. //不要使用myeclipse自动生成的get.set方法(struts2中的用法) publ ...
- kindeditor更改图片上传时网络图片的路径
当我们想要使用kindeditor的图片上传功能时,有两种选择图片方式,一种是本地选择,一种是在图片空间中选择,图片空间的默认地址是server上的/kindeditor/attached/image ...
- 用海豚框架(DolphinPHP)实现单/多图片上传时，如何获得图片路径
用框架实现图片上传很简单,就不多说了,然后这个框架的实现机制是这样的,我们选择图片,点击上传,他会将图片保存在uploads下,以当天时间和随机字母作为图片名,然后在返回个数字,这个数字是这个图片的i ...
- Laravel-Admin图片上传时的问题
关于laravel-admin进入有图片上传页面时,会提示未配置存储路径等信息.此时需要去配置. 查看config/admin.php里面有 'upload' => [ // Disk in ` ...
- wordpress 图片上传时发生了错误，请稍后再试 的解决办法
前一天网站还是好好的,仅一天过后就显示图片无法上传,百思不得其解 上下百度,大多数帖子提供的解决办法对我都不适用,继续搜,最后发现一篇帖子中提到是wp-config的编码格式问题 想到昨天刚好修改了下 ...
随机推荐
- HTML5 之图片上传预处理
在开发 H5 应用的时候碰到一个问题,应用只需要一张小的缩略图,而用户用手机上传的确是一张大图,手机摄像机拍的图片好几 M,这可要浪费很多流量. 像我这么为用户着想的程序员,绝对不会让这种事情发生的, ...
- js实现图片懒加载
大型购物网站都会采用图片懒加载技术来优化网站首页打开速度,以提高用户体验,那么具体是怎么实现的呢,我们一探究竟. html结构(div包裹一层用来显示背景图片,等待图片加载完成后,显示真实图片) &l ...
- Ubuntu下apache2启动、停止、重启、配置
Linux系统为Ubuntu 一.Start Apache 2 Server /启动apache服务# /etc/init.d/apache2 startor$ sudo /etc/init.d/ap ...
- ThinkPHP中的四种路由形式
1.普通形式路由(get形式路由) 路由形式:http://网址/入库文件?m=分组&c=控制器&c=控制器&a=方法名&参数=参数 例子:http://localho ...
- SonarQube的安装、配置与使用(windows)
onarQube是管理代码质量一个开放平台,可以快速的定位代码中潜在的或者明显的错误,下面将会介绍一下这个工具的安装.配置以及使用. 准备工作: 1.jdk(不再介绍) 2.sonarqube:htt ...
- 更改MyEclipse中的src目录的浏览方式
看到这个标题,有人可能不会明白,这里先看张图: 右边的图就是我们要更改的样子,有的时候我们做项目需要看下目录的层次,于是使用了Navigator的那个视图,其实常用的这种包视图也可以变成那种样式. 这 ...
- CCF CSP 201709-4 通信网络
CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201709-4 通信网络 问题描述 某国的军队由N个部门组成,为了提高安全性,部门之间建立了M ...
- string类总结
头文件: <string> 初始化: string str(s1); string str("value"); , 'c'); 读写 //输入未知数目的string对象 ...
- 两种方法设置nginx并发限制下面的白名单策略
前言: 今天,公司主站突然出现IDE创建应用没反应的问题,经过预发布环境.非代理环境下面的服务测试,均没有问题,定位问题出现在前端.而我们前端有两层代理,一是青松抗D系统,一是我们自己的nginx代理 ...
- js回到顶部 动画速度 （自己记录）
x=x-20; 设置回到每10s的速度, function gotoTop(){ var x=document.body.scrollTop||document.documentElement.scr ...