可以对上传的图片的大小、长宽、格式等进行验证。
<!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,.bmp,.png";//允许上传的文件类型 0为无限制
this.AllowImgFileSize=0;//允许上传文件的大小 0为无限制 单位：KB
this.AllowImgWidth=300;//允许上传的图片的宽度 0为无限制 单位：px
this.AllowImgHeight=300;//允许上传的图片的高度 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;
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该文件类型不允许上传";
}
}
if(this.ErrMsg!="")
{
this.ShowMsg(this.ErrMsg,false);
return false;
}
else
return this.CheckProperty(obj);
}
UpLoadFileCheck.prototype.CheckProperty=function(obj)
{
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的文件";
if(this.AllowImgHeight!=0&&this.AllowImgHeight<this.ImgHeight)
this.ErrMsg=this.ErrMsg+"\n图片高度超过限制。请上传高度小于"+this.AllowImgHeight+"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的文件";
if(this.ErrMsg!="")
{
this.ShowMsg(this.ErrMsg,false);
return false;
}
else
return true;
}
UpLoadFileCheck.prototype.ShowMsg=function(msg,tf)
{
alert(msg);
}
function c(obj)
{
var d=new UpLoadFileCheck();
d.IsImg=true;
d.AllowImgFileSize=100;
d.CheckExt(obj)
}
</script>
</head>
<body>
<input name="" type="file" onchange="c(this)"/>
</body>
分享到：
相关推荐
检查上传图片大小 .img {width:136px;height:102px;} .imgError{border:3px solid red;} var MAXSIZE = 100 * 1024; // 图片最大大小限制为100KB var ERROR_IMGSIZE = "图片大小不能超过 100K"; var ...
在IT领域，特别是前端开发中，JavaScript（JS）被广泛应用于网页交互与数据验证，其中对上传图片的大小和格式进行验证是常见的需求之一。本文将深入解析如何使用JavaScript进行图片上传前的验证，包括检查图片格式、...
然后，它使用 JavaScript script 来实现上传图片的功能，包括上传、删除和添加图片的操作。 知识点总结 该资源的知识点主要包括： 1. PHP 批量上传图片的实现方法 2. JavaScript 在批量上传图片中的应用 3. HTML...
在JavaScript中，对上传图片进行大小、宽度和高度的判断是一项常见的前端操作，尤其是在实现用户在网站上上传图片时需要预览和验证图片格式及尺寸的场景。以下是一些关于如何使用JavaScript进行这些判断的关键知识点...
这个项目是用PHP、Ajax和JavaScript这三种技术实现的，允许用户上传图片并即时预览，同时还可以调整显示的图片大小。接下来，我们将深入探讨这些技术以及它们在实现此功能中的角色。 **PHP** 是一种广泛使用的...
在前台验证图片大小时，我们通常会限制用户上传图片的最大尺寸，比如100KB。实现时，首先会在文件输入框上绑定一个change事件，当用户选择文件后，该事件被触发。 在事件处理函数中，首先获取用户选中的图片文件...
在用户上传图片之前，验证图片格式以及提供预览功能是非常重要的步骤，这不仅可以确保上传的图片符合预期的格式要求，还可以为用户提供更好的交互体验。本文将详细讲解如何使用JavaScript来实现这个功能。 首先，...
ExtJS 验证上传文件类型 ExtJS 中实现文件上传功能是非常方便的，但对于新手来说，控制文件上传类型是一个难题。例如，我们只想让用户上传特定的文件类型，例如txt文件，那么如何实现当用户上传非txt文件时，给出...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它主要负责在客户端处理网页的动态交互和数据验证。本文将深入探讨JavaScript客户端验证和页面特效制作的核心知识点。 **一、JavaScript客户端验证** ...
// 限制上传图片大小100K var MAXSIZE = 100 * 1024; // 图片大小限制信息 var ERROR_IMGSIZE = "图片大小不能超过100K"; // 默认图片 var NOPHOTO = "imgs/nophoto.gif"; // 图片是否合格 var isImg = true...
无刷新上传图片是一种提高用户体验的技术，它通过JavaScript和Ajax实现，让用户在不离开当前页面的情况下完成文件上传。这种技术在现代网页应用中广泛使用，因为它能够保持页面的流畅性，减少用户等待时间，并且使...
在IT行业中，构建一个带有上传功能的表单验证页面是一项常见的任务，这通常涉及到前端开发和后端处理。本项目名为“上传文件验证表单”，它利用了Bootstrap框架进行页面布局，并采用了Webuploader插件来处理文件上传...
总结来说，使用JavaScript和`plupload`实现图片上传到阿里云OSS，涉及到的关键技术包括：前端与后端的交互、`plupload`组件的配置与使用、阿里云OSS SDK的调用以及上传事件的监听与处理。这不仅提升了用户体验，还...
在本项目中，"Jquery 表单验证+本地图片上传-切割-预览"是一个综合性的前端开发实例，它涵盖了几个重要的JavaScript库和技术，包括jQuery、表单验证、图片上传、图片切割以及预览功能。以下是这些知识点的详细解释：...
JavaScript 表单美化和验证插件是Web开发中不可或缺的一部分，尤其在构建用户友好且具有交互性的网页时。这类插件通常提供丰富的功能，以提升表单的视觉吸引力和用户体验，同时确保数据的有效性。本插件具备以下关键...
在JavaScript的世界里，静态多附件上传是一个常见的需求，特别是在网页应用中。这个需求涉及到前端的交互设计、数据处理以及与服务器的通信。下面我们将详细探讨这个主题。 首先，"静态"在这里指的是没有依赖服务器...
这个"JS上传图片大小验证.rar"压缩包可能包含了一个实现此类功能的示例或代码片段。 在网页中，通常我们使用HTML的`<input type="file">`标签来让用户选择文件，然后通过JavaScript来获取并检查文件的信息，包括...