可以对上传的图片的大小、长宽、格式等进行验证。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
UpLoadFileCheck=function()
{
this.AllowExt=".jpg,.gif,.bmp,.png";//允许上传的文件类型 0为无限制
this.AllowImgFileSize=0;//允许上传文件的大小 0为无限制 单位：KB
this.AllowImgWidth=300;//允许上传的图片的宽度 0为无限制 单位：px
this.AllowImgHeight=300;//允许上传的图片的高度 0为无限制 单位：px
this.ImgObj=new Image();
this.ImgFileSize=0;
this.ImgWidth=0;
this.ImgHeight=0;
this.FileExt="";
this.ErrMsg="";
this.IsImg=false;
}
UpLoadFileCheck.prototype.CheckExt=function(obj)
{
this.ErrMsg="";
this.ImgObj.src=obj.value;
if(obj.value=="")
{
this.ErrMsg="\n请选择一个文件";
}
else
{
this.FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
if(this.AllowExt!=0&&this.AllowExt.indexOf(this.FileExt)==-1)
{
this.ErrMsg="\n该文件类型不允许上传";
}
}
if(this.ErrMsg!="")
{
this.ShowMsg(this.ErrMsg,false);
return false;
}
else
return this.CheckProperty(obj);
}
UpLoadFileCheck.prototype.CheckProperty=function(obj)
{
if(this.IsImg==true)
{
this.ImgWidth=this.ImgObj.width;
this.ImgHeight=this.ImgObj.height;
if(this.AllowImgWidth!=0&&this.AllowImgWidth<this.ImgWidth)
this.ErrMsg=this.ErrMsg+"\n图片宽度超过限制。请上传宽度小于"+this.AllowImgWidth+"px的文件";
if(this.AllowImgHeight!=0&&this.AllowImgHeight<this.ImgHeight)
this.ErrMsg=this.ErrMsg+"\n图片高度超过限制。请上传高度小于"+this.AllowImgHeight+"px的文件";
}
this.ImgFileSize=Math.round(this.ImgObj.fileSize/1024*100)/100;
if(this.AllowImgFileSize!=0&&this.AllowImgFileSize<this.ImgFileSize)
this.ErrMsg=this.ErrMsg+"\n文件大小超过限制。请上传小于"+this.AllowImgFileSize+"KB的文件";
if(this.ErrMsg!="")
{
this.ShowMsg(this.ErrMsg,false);
return false;
}
else
return true;
}
UpLoadFileCheck.prototype.ShowMsg=function(msg,tf)
{
alert(msg);
}
function c(obj)
{
var d=new UpLoadFileCheck();
d.IsImg=true;
d.AllowImgFileSize=100;
d.CheckExt(obj)
}
</script>
</head>
<body>
<input name="" type="file" onchange="c(this)"/>
</body>
分享到：
相关推荐
Javascript验证上传图片大小[前台处理]_.docx
在做上传图片的时候，如果不限制上传图片大小，后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢？有两种方式： 1)后台处理： 也就是AJAX POST提交到后台，把图片上传到服务器上，然后获得该图片大小做处理...
需求分析： 在做上传图片的时候，如果不限制上传图片大小，后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢？有两种方式： 1)后台处理： 也就是AJAX POST提交到后台，把图片上传到服务器上，然后获得该图片...
项目中经常用到需要上传文件、照片等功能，同时需要限制所上传文件的大小。很多插件都会采用后台请求验证，前端Js校验比较少。本篇介绍一个前端JS便捷判断上传文件大小的方法。 这个是比较好的 <html> <...
上传图片大小验证方法 非完整控件 如需要可以加入正则表达式来判断上传文件扩展名
在网上真得好难找到一个能在网页上对视频进行上传大小的拦截与阻止的控件。在服务器端作验证又太麻烦。现在终于有了一个解决方案纯javascript解决方案。
1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...
做web开发的哥们都会遇到批量上传图片的需求，相信大家都会遇到这样的问题，当选择好要上传的图片，提交服务器后，发现有图片的大小超过了系统允许的范围。
#验证类型图像JS 简单验证上传类型图片Javascript
1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...
方法一：用image对象判断是否为图片 /// /// 判断文件是否为图片 /// /// 文件的完整路径 /// 返回结果 public Boolean IsImage(string path) { try { System.Drawing.Image img = System.Drawing.Imag
用JavaScript实现的动态表格，双击可以实现不同类型的单元格内容的更改，有增删改的更能，可以上传图片，放大图片显示，日历，JavaScript验证等
前端部分可能使用HTML, CSS, JavaScript等技术实现用户交互界面，允许用户选择并上传图片；后端部分则可能利用如Node.js, Python Flask, Java Spring等框架来处理文件的接收、验证和存储；数据库方面可能涉及SQL或...
主要介绍了JavaScript实现预览本地上传图片功能,结合完整实例形式分析了javascript图片预览相关的格式正则验证、浏览器判断、页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
5.1 连续滚动的文字，图片（注意是连续的，两段文字和图片中没有空白出现） 5.2 html编辑控件类 5.3 颜色选取框控件 5.4 下拉菜单 5.5 两层或多层次的下拉菜单 5.6 仿IE菜单的按钮。（效果如rongshuxa....
5.1 连续滚动的文字，图片（注意是连续的，两段文字和图片中没有空白出现） 5.2 html编辑控件类 5.3 颜色选取框控件 5.4 下拉菜单 5.5 两层或多层次的下拉菜单 5.6 仿ie菜单的按钮。（效果如rongshuxa....
ASP_Upload的例子-动态表单部分