上传的js验证(图片/文件的扩展名)

所属分类: 网络编程 / JavaScript 阅读数: 1771
收藏 0 赞 0 分享
js 验证上传图片
复制代码 代码如下:

var ImgObj=new Image();//建立一个图像对象
varAllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部图片格式类型
varFileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,IsImg//全局变量图片相关属性
//以下为限制变量
var AllowExt=""; //允许上传的文件类型ŀ为无限制每个扩展名后边要加一个"|" 小写字母表示
var AllowImgFileSize=100;//允许上传图片文件的大小 0为无限制 单位:KB
var AllowImgWidth=385; //允许上传的图片的宽度Ɓ为无限制 单位:px(像素)
var AllowImgHeight=441; //允许上传的图片的高度ƹ为无限制 单位:px(像素)
function CheckProperty(obj) //检测图像属性
{
FileObj=obj;
if(ImgObj.readyState!="complete")//如果图像是未加载完成进行循环检测
{
setTimeout("CheckProperty(FileObj)",500);
return false;
}
ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得图片文件的大小
ImgWidth=ImgObj.width;//取得图片的宽度
ImgHeight=ImgObj.height; //取得图片的高度
FileMsg="\n图片大小:"+ImgWidth+"*"+ImgHeight+"px";
FileMsg=FileMsg+"\n图片文件大小:"+ImgFileSize+"Kb";
FileMsg=FileMsg+"\n图片文件扩展名:"+FileExt+"\n可以上传!";
ErrMsg="";
if(AllowImgWidth!=ImgWidth)
ErrMsg=ErrMsg+"\n请上传宽度等于"+AllowImgWidth+"px的文件,当前图片宽度为"+ImgWidth+"px";
if(AllowImgHeight!=ImgHeight)
ErrMsg=ErrMsg+"\n请上传高度等于"+AllowImgHeight+"px的文件,当前图片高度为"+ImgHeight+"px";
if(AllowImgFileSize!=0&&AllowImgFileSize<ImgFileSize)
ErrMsg=ErrMsg+"\n请上传小于"+AllowImgFileSize+"KB的文件,当前文件大小为"+ImgFileSize+"KB";
if(ErrMsg!="")
{
alert(ErrMsg);
return false;
}
else
return true;
}//end CheckProperty();
ImgObj.onerror=function(){ErrMsg='\n图片格式不正确或者图片已损坏!';}
function CheckExt(obj)
{
ErrMsg="";
FileMsg="";
IsImg=false;
if(obj.value=="")
return false;
FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
if(AllImgExt.indexOf(FileExt+"|")!=-1)//如果图片文件,则进行图片信息处理
{
IsImg=true;
FileObj=obj;
ImgObj.src=obj.value;
returnCheckProperty(obj);
}else
{
alert("该文件类型不允许上传。请上传"+AllImgExt+"类型的文件,\n当前文件类型为"+FileExt);
obj.value='';
return false;
}
}

上传的js验证
下文给大家介绍怎样控制一个上传文件的扩展名。
js:
复制代码 代码如下:

function check2()
{
var file = document.getElementsByName("file").value;
if(file=="")
{
alert("请选择文件");
return false;
}
var strTemp = file.split(".");
var strCheck = strTemp[strTemp.length-1];
if(strCheck.toUpperCase()=='JPG')
{
return true;
}else
{
alert('上传文件类型不对!');
return false;
}
}

表单:
复制代码 代码如下:

<form action="*.jsp" method="post" onsubmit="return check()">
<input type="file" name="file">
<input type="submit" value="上传">
</form>

需要注意的是,document.getElementsByName("file").value获取的是所上传的文件的绝对路径,故使用字符串分割法将文件的拓展名分割出来,然后再进行判断。
更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多