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

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获取的是所上传的文件的绝对路径,故使用字符串分割法将文件的拓展名分割出来,然后再进行判断。

时间: 2024-12-08 11:32:44

上传的js验证(图片/文件的扩展名)_javascript技巧的相关文章

图片上传判断及预览脚本的效果实例_javascript技巧

复制代码 代码如下: <div id="imgbox">    <img id="imghead" src="img/no_photo.gif" alt="" width="100" height="125" />    </div><asp:FileUpload ID="FileUploadImg" runat="

用js来获取上传的文件名纯粹是为了美化而用_javascript技巧

为啥要用js来获取上传的文件名呢?其实纯粹是为了美化,友好, 但是,可不是网上流传的那样,用 path.substring(path.lastIndexOf('/')+1) ; 这个样在工作的时候会出现不少问题. 比如,firefox的input表单的value值默认就可以获取到文件名,而ie 则显示文件路径. 所以要区别对待,在firefox下 lastIndexOf('/')得到的是-1,而在ie下,目录显示的又是反斜杠,\,当然在Linux 下,其他浏览器获取到的又是正斜杠 / ( 暂时未

js本地图片预览实现代码_javascript技巧

本文实例为大家分享了js本地图片预览实例,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="divPreview"> <img id="imgHeadPhoto" src="noperson.jpg" style="wid

js验证模型自我实现的具体方法_javascript技巧

市面上有很多表单验证的框架,教我们怎么验证表单的数据提交,说实话也真的很简单,但是我们会有一种感觉我们要是离开了这些框架的时候,我们有时候会束手无策,然后js验证写的很不规范,没有一套比较好的模式,那我写这篇的目的就是:我们自己构建js验证应该是什么样子的,来慢慢看一下.假设我们现在写一个登录的页面(这可能是最简单的数据提交了哦),html页面会有一个用户名和一个密码的文本框让我们用户输入自己的用户名和密码,我们肯定是要判断用户名和密码是否为空,很明显这样的js验证判断是放在onblur事件里面

ASP上传漏洞之利用CHR(0)绕过扩展名检测脚本_应用技巧

今天Demon 提到了这个问题,正好想到之前看到的一篇文章<Automatic file upload using IE+ADO without user interaction - VBSscript> .这篇文章给出了本地无交互自动上传脚本的示例,正好今天可以借来一用,原脚本利用了InternetExplorer.Application组件,我改写了一下,用WinHttp.WinHttpRequest.5.1实现了类似的功能,关于这个组件更多的用法请参考<WinHttpRequest

js获取图片宽高的方法_javascript技巧

本文分享多种js获取图片宽高的方法,并且通过实例进行分析,希望大家从中有所收获. 一.简陋的获取图片方式 // 图片地址 后面加时间戳是为了避免缓存 var img_url = 'upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 打印 alert('width:'+img.width+',height:'

ASP上传漏洞之利用CHR(0)绕过扩展名检测脚本

今天Demon 提到了这个问题,正好想到之前看到的一篇文章<Automatic file upload using IE+ADO without user interaction - VBSscript> .这篇文章给出了本地无交互自动上传脚本的示例,正好今天可以借来一用,原脚本利用了InternetExplorer.Application组件,我改写了一下,用WinHttp.WinHttpRequest.5.1实现了类似的功能,关于这个组件更多的用法请参考<WinHttpRequest

原生JS实现图片轮播切换效果_javascript技巧

首先来分析一下轮播图效果的实现原理: 1.父元素作为显示窗口,大小固定超出部分隐藏,即设置overflow:hidden; 2.子元素存放图片列表用ul,ul固定定位,参照为父元素,即父元素position:relative;ul元素position:absolute; 3.一个li即一张图片的宽度为父元素的显示宽度 4.初始时,ul的left为0,这时第一张图片即第一个li显示 5.点击下一张按钮,将整个ul左移,使第二个li对齐父元素的左边框,此时ul的left为负的一个li的宽度 6.点击

js验证是否为数字的总结_javascript技巧

js验证是否为数字,最简单的方法: isNaN函数的使用: function checknum() { if (isNaN(frm.num.value)) { alert("请输入数字"); frm.num.focus(); return false; } } 最完整最精确的方法:(正则表达式) 1) "^\\d+$" //非负整数(正整数 + 0) "^[0-9]*[1-9][0-9]*$" //正整数 "^((-\\d+)|(0+)