`

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>

分享到：
| JavaScript 面向对象程序设计（下）——继 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js验证上传图片 大小 格式

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

    js上传图片大小类型限制检测

    本文将深入探讨如何使用JavaScript进行图片上传前的大小和类型限制检测。 首先，我们要了解JavaScript在浏览器环境中的文件操作能力。由于安全原因，JavaScript无法直接读取本地文件内容，但它可以通过HTML5的File ...

    高度,javascript判断上传图片大小，宽度，高度

    在JavaScript中，对上传图片进行大小、宽度和高度的判断是一项常见的前端操作，尤其是在实现用户在网站上上传图片时需要预览和验证图片格式及尺寸的场景。以下是一些关于如何使用JavaScript进行这些判断的关键知识点...

    js脚本检测图片大小 非FSO

    在JavaScript编程中，有时我们需要在不借助服务器端文件系统对象（FSO）的情况下检测图片的大小，例如在预览图片或者处理上传时。这个场景下，我们可以通过读取图片的Blob对象或DataURL来获取其大小。下面将详细介绍...

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

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

    支持图片上传及实时显示，可设置显示图片的大小。由php、Ajax、javascript开发

    在这个项目中，PHP主要负责接收上传的图片文件，进行验证（如检查文件类型、大小等），然后将图片保存到服务器的特定目录。此外，PHP可能还会生成图片的缩略图或调整大小，以适应不同的显示需求。 **Ajax...

    js控制上传图片的大小

    ### JS控制上传图片的大小 在现代Web应用中，对用户上传的图片进行尺寸限制是一项常见且实用的功能。本文将详细介绍如何使用JavaScript来实现这一功能，包括如何检测上传图片的大小，并在不符合要求时给予提示。 #...

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

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

    js 图片上传前大小长宽验证代码

    ### js 图片上传前大小长宽验证知识点 #### 1. 图片预览与信息获取 在进行图片上传前，需要实现图片的预览以及获取图片的尺寸信息。在JavaScript中，可以通过创建一个`Image`对象来实现。实例化一个`Image`对象后，...

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

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

    JavaScript检测上传文件大小的方法

    本文主要介绍了如何使用JavaScript检测用户上传文件的大小，这在网页设计中是一个常见的需求，尤其当需要限制上传文件大小以符合服务器端处理能力或者节省带宽资源时。 首先，网页中的文件上传通常是通过HTML的文件...

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

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

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

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

    JS控制图片上传大小

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

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

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

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

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

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

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

    JS判断上传文件的大小类型等限制

    ### JS判断上传文件的大小类型等限制 在Web开发中，文件上传是一个常见的功能需求。为了确保用户体验并防止服务器资源被滥用，前端通常需要对上传的文件进行一系列的验证，如文件大小、文件类型等。本文将详细介绍...

    js判断上传文件大小

    js判断上传文件大小 兼容大部分主流浏览器

    js检测各种浏览器

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

Magicbox
Global site tag (gtag.js) - Google Analytics