文档章节

js验证上传图片的尺寸

HJCui
 HJCui
发布于 2016/05/19 18:40
字数 224
阅读 96
收藏 6

//js对上传图片的长宽进行验证
//js方法如下:

function getImageSize(obj){
    var filemessage=document.getElementById("filemessage");
    var _file=document.getElementById("file");
        var i=_file.value.lastIndexOf('.');
        var len=_file.value.length;
        var extEndName=_file.value.substring(i+1,len);
        var extName="GIF,BMP,JPG,JPEG,SWF";//首先对格式进行验证
        if(extName.indexOf(extEndName.toUpperCase())==-1){
            filemessage.innerHTML="*您只能输入"+extName+"格式的文件"
        }else{
             if(extEndName.toUpperCase()=='SWF'){//对swf文件不限制大小,因为下边是自己手动限制的
                filemessage.innerHTML="文件有效";
             }else{
                 var url,image;
                if(obj.files){
                   url=obj.files[0].getAsDataURL();
                }else{
                   url=obj.value;
                   url="file:///"+url;
                }
                image=new Image();
                image.src=url;
                image.onload=function(){
                  if(image.width>985||image.height>123){
                   filemessage.innerHTML="*提示:文件大小不对。您只能上传985*123尺寸的图片或者swf文件";
                  }else{
                   filemessage.innerHTML="文件有效";
                  }
                }
             }
        }
 }


html中调用:
<input type="file" name="file" id="file" onchange="getImageSize(this)"/>
 <span id="filemessage">*图片或者swf文件(980*123)</span>//用于显示提示信息或者错误信息

© 著作权归作者所有

HJCui
粉丝 10
博文 127
码字总数 84266
作品 0
朝阳
程序员
私信 提问
原创jquery图片上传预览插件uploadView

勾国印原创jquery图片上传前预览插件uploadView,支持自定义允许上传图片的最大尺寸、允许上传图片的格式、预览图片的宽度和高度以及上传成功后回调函数,兼容手机端和PC端。 大家在开发网站...

够过瘾
2015/10/24
5.5K
0
问下 有谁做过 用js 验证图片尺寸、大小。。并且兼容火狐 谷歌 ie?~!

就是在做图片上传的时候,需要验证 图片是否符合大小 尺寸·· 网上有很多js代码 但是 不是谷歌不行 就是火狐不行·····求解···顺带问问 红薯老大的那个上传图像 是怎么验证的 ?~...

IT小混混
2011/07/21
1K
6
Web设计与开发终极资源大全(上)

Web 技术突飞猛进,Web 设计与开发者们可以选择的工具越来越多,Web 开发者的技巧不再只限于 HTML 和 服务器端编程,还需要精通各种第三方资源,这些第三方资源有时候比你的项目更复杂,更专...

红薯
2010/03/18
1K
3
js如何处理图片尺寸不变KB变小?

现在都进入了移动互联网,但是现在还是流量很宝贵 想在手机网站上拍照后上传很费流量 有什么办法能让用户不动手但是也可以把图片尺寸不变大小变小后在上传的解决方法啊? 请大神们指点 之前在...

學楽
2014/10/21
2.7K
6
crmeb电商系统 PHP快速生成表单,支持表单验证

form-builder PHP表单生成器,快速生成现代化的form表单。包含复选框、单选框、输入框、下拉选择框等元素以及省市区三级联动、时间选择、日期选择、颜色选择、树型、文件/图片上传等功能。 ...

阿里源码
03/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

前端技术之:Prisma Demo服务部署过程记录

安装前提条件: 1、已经安装了docker运行环境 2、以下命令执行记录发生在MackBook环境 3、已经安装了PostgreSQL(我使用的是11版本) 4、Node开发运行环境可以正常工作 首先需要通过Node包管...

popgis
今天
5
0
数组和链表

数组 链表 技巧一:掌握链表,想轻松写出正确的链表代码,需要理解指针获引用的含义: 对指针的理解,记住下面的这句话就可以了: 将某个变量赋值给指针,实际上就是将这个变量的地址赋值给指...

code-ortaerc
今天
4
0
栈-链式(c/c++实现)

上次说“栈是在线性表演变而来的,线性表很自由,想往哪里插数据就往哪里插数据,想删哪数据就删哪数据...。但给线性表一些限制呢,就没那么自由了,把线性表的三边封起来就变成了栈,栈只能...

白客C
今天
43
0
Mybatis Plus service

/** * @author beth * @data 2019-10-20 23:34 */@RunWith(SpringRunner.class)@SpringBootTestpublic class ServiceTest { @Autowired private IUserInfoService iUserInfoS......

一个yuanbeth
今天
5
0
php7-internal 7 zval的操作

## 7.7 zval的操作 扩展中经常会用到各种类型的zval,PHP提供了很多宏用于不同类型zval的操作,尽管我们也可以自己操作zval,但这并不是一个好习惯,因为zval有很多其它用途的标识,如果自己...

冻结not
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部