`
348102023
  • 浏览: 13488 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
最近访客 更多访客>>
社区版块
存档分类
最新评论

JS类 检测上传图片的大小,宽,高及格式检查(转载)

阅读更多

 
 <!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";//允许上传的文件类型 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)//判断文件类型是否允许上传
   {
    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)
 {
  if(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;//取得图片文件的大小 
  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=100;
  d.CheckExt(obj)
 }
</script>

</head>

<body>
<input name="" type="file"   />


</body>
</html>


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/alex197963/archive/2009/09/24/4589811.aspx

分享到:
评论

相关推荐

    js验证上传图片 大小 格式

    在IT领域,特别是前端开发中,JavaScript(JS)被广泛应用于网页交互与数据验证,其中对上传图片的大小和格式进行验证是常见的需求之一。本文将深入解析如何使用JavaScript进行图片上传前的验证,包括检查图片格式、...

    javaScript检测图片大小

    javaScript检测图片大小,检测图片的大小,尺寸

    JS获取图片实际宽高及根据图片大小进行自适应

    本文将详细讲解如何使用JavaScript获取图片的实际宽高,并实现根据图片大小进行自适应的解决方案。 首先,我们需要理解为什么不能直接通过CSS来获取图片的实际宽高。通常,图片在加载时其尺寸信息并未立即可用,...

    【JavaScript源代码】JavaScript获取网页的宽高及如何兼容详解.docx

    JavaScript 是一种广泛应用于网页开发的脚本语言,它允许开发者在浏览器端动态地操作网页内容。在实际开发中,有时我们需要获取网页的宽度和高度,以便进行布局调整、响应式设计或其他交互效果。本文将详细介绍如何...

    javascript 实现限制上传文件大小

    javascript 实现限制上传文件大小

    上传图片预览(限制格式大小)

    本篇将详细介绍如何在`.NET MVC`框架下,结合`HTML`、`JavaScript`(简称Js)和`jQuery`(简称JQ)实现"上传图片预览"功能,并限制上传的图片格式和大小。 首先,我们需要在前端页面创建一个`HTML`表单,包含一个`...

    图片上传-可以限制图片的大小和类型

    为了提供良好的用户体验并确保系统稳定运行,开发者通常需要对用户上传的图片进行一些限制,包括图片的大小和类型。以下是对这一主题的详细说明: 1. **图片大小限制**: - **原因**:图片过大可能导致上传时间过...

    上传图片客户端判断大小,javascript获得上传图片的大小

    不用IE控件(ActiveXObject)不用 Img属性 上传图片客户端判断大小,javascript获得上传图片的大小 兼容所有浏览器,亲测可用 判断文件大小,判断上传图片的大小,图片格式

    struts2 图片上传,图片大小,图片格式

    Struts2是一个流行的Java web框架,它为开发者提供了一种模型-视图-控制器...通过学习和理解这个项目,你可以掌握Struts2图片上传的核心技术,包括文件上传、大小限制和格式检查,这些都是Web开发中非常实用的技能。

    若依(ruoyi)前后端分离版实现图片上传拖拽修改图片大小(公告页面)

    "若依(ruoyi)前后端分离版实现图片上传拖拽修改图片大小(公告页面)"是针对若依框架的一个功能增强,允许用户在上传图片后,通过拖拽的方式实时调整图片的大小,这极大地提升了用户的交互体验。 首先,我们需要...

    js活体检测(纯HTML5) https下 安卓可用

    JavaScript(简称JS)活体检测是一种基于纯HTML5技术实现的身份验证方法,它在HTTPS安全协议下运行,确保用户在安卓设备上进行身份验证时,能够有效地检测到真实的人脸,而不是静态的照片或其他非活体图像。...

    kindEditor4.1版修改上传图片宽高(图片自适应)

    在使用kindEditor4.1版本时,我们可能会遇到一个常见的问题:上传的图片无法很好地适配不同大小的屏幕,导致在某些设备上出现拉伸或失真的现象。为了改善用户体验,我们需要实现图片自适应功能,即无论页面如何缩放...

    JS控制图片上传大小

    本文将深入探讨如何使用JavaScript(JS)来控制图片上传的大小,确保用户上传的图片符合预设的标准。 一、图片上传前的前端验证 在用户提交图片之前,前端验证是最直接的控制方式。可以使用HTML5的`FileReader API...

    JS实现控制图片显示大小的方法【图片等比例缩放功能】

    在给定的文件内容中,描述了一个名为AutoResizeImage的JavaScript函数,该函数能够根据设定的最大宽度(maxWidth)和最大高度(maxHeight)来调整图片大小,同时保持图片原始的宽高比。具体实现步骤如下: 1. 函数定义...

    js验证上传swf文件格式的大小

    在IT行业中,前端开发经常会遇到用户上传文件的需求,而对上传文件的格式和大小进行验证是确保系统稳定性和用户体验的重要环节。本知识点主要探讨如何使用JavaScript(js)来验证SWF(Shockwave Flash)文件的格式,...

    vue 检测用户上传图片宽高的方法

    在Vue.js应用中,检测用户上传图片的宽高是一个常见的需求,这有助于确保用户上传的图片符合特定的尺寸规格。以下是一种实现此功能的方法: 首先,我们需要创建一个数据对象`picArray`,用于存储每张图片的宽度和...

    利用文档工具检测PDF中的恶意Javascript

    ### 利用文档工具检测PDF中的恶意Javascript #### 摘要 自2008年起,PDF文档作为恶意软件传播的一种新兴媒介逐渐受到广泛关注。由于PDF格式的普及及其对JavaScript的支持,它成为了攻击者利用漏洞的主要手段之一。...

    前端开发中利用JavaScript判断上传图片大小与格式的实现方法

    同时提到,在开发过程中为了保障用户体验以及服务器负载优化,对图片的这类检查十分必要。此外文中直接给出了可供复制使用的JavaScript函数,该函数可以在获取到用户选择的照片之后调用以执行检验操作。 适合人群:...

    纯javascript实现上传图片前图片预览,判断图片大小

    在本文中,我们将深入探讨如何使用纯JavaScript实现上传图片前的预览功能,并且检查图片的大小,确保兼容性覆盖到IE7至IE10、Firefox以及Chrome等主流浏览器。这个功能对于用户交互体验有着重要的作用,因为它允许...

    js检测各种浏览器

    js检测ie8,ie9,ie10,ie11,edge,chrome,safari,opera。vue可直接引入。

Global site tag (gtag.js) - Google Analytics