js实现图片文件校验，验证上传的文件是图片和其后缀名，大小

最新推荐文章于 2022-02-16 10:25:06 发布
最新推荐文章于 2022-02-16 10:25:06 发布
阅读量3.2k 收藏 1
点赞数
分类专栏： js jquery相关 文章标签： function generator date html file image

转自 http://blog.csdn.net/possibleonline/archive/2009/04/21/4096902.aspx

很实用

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script>

 UpLoadFileCheck=function()
 {
   this.AllowExt=".jpg,.gif,.png";//允许上传的文件类型 0为无限制 每个扩展名后边要加一个"," 小写字母表示
   this.AllowImgFileSize=0;//允许上传文件的大小 0为无限制 单位：KB
   this.AllowImgWidth=0;//允许上传的图片的宽度 0为无限制　单位：px(像素)
   this.AllowImgHeight=0;//允许上传的图片的高度 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;
  //this.HasChecked=false;
  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)//判断文件类型是否允许上传
   {
    obj.value = "";
    this.ErrMsg="/n该文件类型不允许上传。请上传 "+this.AllowExt+" 类型的文件，当前文件类型为"+this.FileExt; 
   }
  }
  if(this.ErrMsg!="")
  {
   this.ShowMsg(this.ErrMsg,false);
   return false;
  }
  else 
   return this.CheckProperty(obj);  
 }
 
 UpLoadFileCheck.prototype.CheckProperty=function(obj)
 {
  while(this.ImgObj.readyState!="complete")//
   {
    sleep(1000);//一秒使用图能完全加载  
   } 
 
  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的文件，当前图片宽度为"+this.ImgWidth+"px";
 
   if(this.AllowImgHeight!=0&&this.AllowImgHeight<this.ImgHeight)
   this.ErrMsg=this.ErrMsg+"/n图片高度超过限制。请上传高度小于"+this.AllowImgHeight+"px的文件，当前图片高度为"+this.ImgHeight+"px";
  }
 
  this.ImgFileSize=Math.round(this.ImgObj.fileSize/1024*100)/100;//取得图片文件的大小
alert(this.ImgFileSize);
  if(this.AllowImgFileSize!=0&&this.AllowImgFileSize<this.ImgFileSize)
   this.ErrMsg=this.ErrMsg+"/n文件大小超过限制。请上传小于"+this.AllowImgFileSize+"KB的文件，当前文件大小为"+this.ImgFileSize+"KB";
 
  if(this.ErrMsg!="")
  {
   this.ShowMsg(this.ErrMsg,false);
   return false;
  }
  else
   return true;
 }
 
 UpLoadFileCheck.prototype.ShowMsg=function(msg,tf)//显示提示信息 tf=false 显示错误信息 msg-信息内容
 {
  /*msg=msg.replace("/n","<li>");
  msg=msg.replace(//n/gi,"<li>");
   */
  alert(msg);
 }
 function   sleep(num) 
   { 
    var   tempDate=new   Date(); 
    var   tempStr=""; 
    var   theXmlHttp   =   new   ActiveXObject(   "Microsoft.XMLHTTP"   ); 
    while((new   Date()-tempDate)<num   ) 
    { 
    tempStr+="/n"+(new   Date()-tempDate); 
    try{ 
    theXmlHttp   .open(   "get",   "about:blank?JK="+Math.random(),   false   ); 
    theXmlHttp   .send(); 
    } 
    catch(e){;} 
    } 
   //containerDiv.innerText=tempStr; 
   return; 
   } 

 function c(obj)
 {
  var d=new UpLoadFileCheck();
  d.IsImg=true;
  d.AllowImgFileSize=20;
  d.CheckExt(obj)
 }
</script>
 </HEAD>

 <BODY>
  <input name="" type="file"   onChange="c(this)"/>
 </BODY>
</HTML>

 

 

 

---------------------------------------------------------------------------------------------

以下从我的程序剪裁下来的简洁版，只验证图片格式

 function cpic(file){
     var dFile = document.getElementById(file.id);

        
                 if(!dFile.value.match(/.jpg|.gif|.png|.bmp/i)){
                         alert('图片类型必须是: .jpg, .gif, .bmp or .png !');
                         return false;
                 }else{
                         return true;
                 }

}

JerryYangPHP
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端js获取图片大小 扩展名_JavaScript 获取上传图片大小、尺寸
weixin_33384949的博客
01-17 640
背景在一些比较特殊的需求中，会对上传的文件大小、尺寸做限制，例如某个地方的图片只能是 1920 * 1080 的大小，然后文件体积小于 500KB 等。上传的时候做限制一个最简单的上传案例document.getElementById('j-input-file').addEventListener('change', function(e) {console.log(this.files[0])...
js验证图片大小及后缀名
sunshine_silence的博客
05-27 2668
function isvalidatefile(obj) {      debugger;    var extend = obj.substring(obj.lastIndexOf(".") + 1);      if (extend == "") {          }     else {          if (!(extend == "png" )&&!(extend
文件后缀校验
ZeWe的博客
05-23 2074
文件上传时，为了安全验证，对于手工改动文件后缀名产生的伪造文件进行判断过滤。我们可以根据文件头来判断该文件究竟是什么文件类型。 以下常见文件头类型（网查可靠待定） JPEG (jpg)，文件头：FFD8FF PNG (png)，文件头：89504E47 GIF (gif)，文件头：47494638 TIFF (tif)，文件头：49492A00 Windows Bitmap...
前端判断文件后缀名
weixin_42018331的博客
12-18 823
this.title=row.fileName; var getPoint=this.title.lastIndexOf(’.’); var suffix=this.title.substr(getPoint); if(suffix==’.pdf’){ }
JS图片压缩+图片上传前检测类型、大小、尺寸
初心
01-13 2454
原生JS压缩图片 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js压缩图片</title> </head> <body> <img id="img" src=""> <input id="file" type="file" onchange="compressImg()"> </bod
php实现信用卡校验位算法THE LUHN MOD-10示例
01-20
按照ISO 2894中支付卡校验位的算法 The Luhn Mod-10 Method 规定： 1、对卡号上的每位数字乘以权重。其规则是，如果卡号数字个数是偶数，则第一位乘以2，否则就乘以1，然后以后分别是,1,2,1,2,1,2;2、如果每位数字...
js番茄的表单验证类
12-11
相信大家看代码后再添加一些针对其他格式的验证也不是太麻烦的事情 对于各种提示效果需要修改 feedback 方法就可以实现，因为不想让代码变得太臃肿，所以有很多不常用的功能就没有再添加了 主要目的提供大家参考与...
JavaScript对象验证库js-validator.zip
07-19
js-validator 是 Laravel 风格的 JavaScript 对象验证库。使用 js-validator 来验证对象或者 JSON 是否符合规则非常方便，而且具有很好的可扩展性。举个例子var example = {  text: 'Hello world!',  date: ...
基于JavaScript的电弧故障检测系统Web端设计实现源码(本科毕设).zip
08-03
基于JavaScript的电弧故障检测系统Web端设计实现源码(本科毕设) 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到94.5分，放心下载使用！ 该资源适合计算机相关专业(如...
socket-token-auth-server:使用令牌进行套接字身份验证的Node.js代码
05-18
套接字令牌验证服务器 安装节点2）从根目录安装npm。 这将安装所有依赖项3）节点index.js-这将启动服务器4）更改端口open index.js并在行号30中对其进行更改。现在是3000
js判断后缀名!!!!!!!!!!!!!!!!!!
11-06
html js判断后缀名 !
上传的js验证(图片/文件的扩展名)
12-12
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为无限制 单位：K
js判断 上传文件类型必须是图片格式的
sungang1120的专栏
06-13 945
function isImg(str)  {      if(str.search("[.]+(jpg|jpeg|swf|gif|png|JPG|JPEG|SWF|GIF|PNG)$"))      {          return false;    }      return true;  }  // 截取url后面的文件类型function getUploadUrlSuffix(urlS...
js正则表达式验证文件扩展名
Baby_加油_的博客
02-16 3974
js正则表达式验证文件扩展名 验证是否是图片
JS—— 常用图片后缀正则校验
qq812457115的博客
02-04 4865
1.js function verifySuffix(fileName) { suffix = `(bmp|jpg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp|jpeg)` var regular = new RegExp(`.*\.${suffix}`) return regular.test(fileName) }
判断链接后缀文件类型
悄悄地卷的博客
10-10 1239
1、获取文件后缀 //文件路径 var filePath = "file://upload/jb51.png"; //获取最后一个.的位置 var index= filePath.lastIndexOf("."); //获取后缀 var ext = filePath.substr(index+1); //输出结果 console.log(ext); 2、文件类型判断 ​ 我们得到文件后缀名后，根据后缀即可判断文件的类型（文件格式）。比如我们需要判断一个文件是否是图片格式，首 先定义一个判断函数： func
js判断文件后缀名方法
weixin_44745330的博客
11-14 2658
1.这是通过element中上传文件后返回的type类型来判断文件类型，比较麻烦，对应rar文件类型为空不好判断 注释的代码是通过（点）后面的字符来判断是否是相同类型文件，这种方式有缺陷，（我是pdf.sss.pdf）这样的文件命名无法判断 // const extension = file.name.split('.')[1] === 'zip'; // ...
JS - 获取文件后缀，判断文件类型（比如是否为图片格式）
热门推荐
weixin_42178050的博客
06-10 1万+
http://www.hangge.com/blog/cache/detail_1754.html
asp.net core 文件上传
最新发布
08-07
综上所述，ASP.NET Core 文件上传可以通过前端的文件选择和JavaScript来实现文件上传功能，并使用ASP.NET Core的控制器来接收和处理上传的文件。可以对上传的文件进行验证和处理，并将其保存到指定的位置。完成文件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值