提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Javascript验证上传图片大小[前台处理]

JavaScript上传 处理 验证 前台 图片大小
2023-06-13 09:15:38 时间

需求分析：

在做上传图片的时候，如果不限制上传图片大小，后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢？有两种方式：
1)后台处理：也就是AJAXPOST提交到后台，把图片上传到服务器上，然后获得该图片大小做处理。
2)前台处理：也就是利用Javascript获取该图片大小。
显然第一种方式，很不好。因为需要把文件先上传到服务器上，如果文件很大的话，在加上网不是很快，需要等待好长时间，治标不治本。

功能解析：

在这里我只介绍IE与FireFox两个浏览器的不同做法。
IE6：
关键字：fileSizeonreadystatechangecomplete
在IE6中可以通过Img对象的fileSize属性获得文件大小，但这个fileSize属性的正确值是建立在onreadystatechange事件的complete中，也就是

<imgsrc=""class="img"
onreadystatechange="Javascript:sizeCheck(this);">
functionsizeCheck(img){

if(img.readyState=="complete"){
alert(img.fileSize);
}
}

FireFox3.0：
关键字：getAsDataURL()fileSize
在FireFox中处于安全的考虑，无法获得上传图片的完整路径，只能获得图片名称。但浏览器提供nsIDOMFile??右??接口，所以需要通过getAsDataURL()获得处理过后的路径，但该路径不影响图片src显示。
nsIDOMFile接口：

DOMStringgetAsBinary();
DOMStringgetAsDataURL();
DOMStringgetAsText(inDOMStringencoding);


<inputtype="file"name="uploadImg"
onchange="Javascript:checkFileChange(this);"
size="12"/>
functioncheckFileChange(obj){
varimg=document.getElementById("img");
img.src=obj.files[0].getAsDataUrl();
alert(obj.files[0].fileSize);
}

以上是两个不同浏览器的处理方式,那么怎么把他们融和到一起呢？我在下面会将我做的小例子贴出来，其中里面我使用JQuery，方便与获取对象

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh"lang="zh"dir="ltr">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<scripttype="text/javascript"src="lib/jquery-1.3.2.min.js"></script>
<title>检查上传图片大小</title>
<styletype="text/css">
.img{width:136px;height:102px;}
.imgError{border:3pxsolidred;}
</style>
<scripttype="text/javascript">
//限制上传图片大小100K
varMAXSIZE=100*1024;

//图片大小限制信息
varERROR_IMGSIZE="图片大小不能超过100K";
//默认图片
varNOPHOTO="imgs/nophoto.gif";

//图片是否合格
varisImg=true;
/**
*Inputfileonchange事件
*@paramsobjfile对象
*@returnvoid
**/
functioncheckFileChange(obj){

//初始化设置
$(".imgTable").removeClass("imgError");
updateTips("");
varimg=$(".img").get(0);
varfile=obj.value;
varexp=/.\.jpg|.\.gif|.\.png|.\.bmp/i;
if(exp.test(file)){//验证格式
if($.browser.msie){//判断是否是IE
img.src=file;
}else{
img.src=obj.files[0].getAsDataURL();
sizeCheck(img);
}

}else{
img.src=NOPHOTO;
$(".imgTable").addClass("imgError");
updateTips("图片格式不正确");
isImg=false;
}

}
/**
*sizeCheck检查图片大小
*@paramsimg图片对象
*@returnvoid
**/
functionsizeCheck(img){
//初始化设置
$(".imgTable").removeClass("imgError");
updateTips("");
if($.browser.msie){//查看是否是IE
if(img.readyState=="complete"){
if(img.fileSize>MAXSIZE){
$(".imgTable").addClass("imgError");
updateTips(ERROR_IMGSIZE);
isImg=false;
}else{
isImg=true;
}

}else{
$(".imgTable").addClass("imgError");
updateTips(ERROR_IMGSIZE);
isImg=false;
}

}else{
varfile=$("input:file[name="uploadImg"]")[0];

if(file.files[0].fileSize>MAXSIZE){
$(".imgTable").addClass("imgError");
updateTips(ERROR_IMGSIZE);
isImg=false;
}else{
isImg=true;
}

}
}

/**
*updateTips注册错误信息显示
*@paramsstr显示内容
*@returnvoid
**/
functionupdateTips(str){
$("p#errorTips").text(str);
}
/**
*commit注册提交
*@returnvoid
**/
functioncommit(){

varisCommit=true;
varusrname=$("input:text[name="usrname"]"),
email=$("input:text[name="email"]"),
img=$(".img"),
file=$("input:file[name="uploadImg"]"),
frm=document.frm;

isCommit=isCommit&&isImg;

if(isCommit){
frm.action="about:blank";
frm.submit();
}
}
/**
*errorImg图片错误显示
*@paramsimg图片对象
*@returnvoid
**/
functionerrorImg(img){
img.src=NOPHOTO;
}

</script>
</head>
<body>
<formname="frm"method="post">
<pid="errorTips"></p>
<tablecellpadding="1"cellspacing="0"width="350px"border="1">
<tr>
<td><label>姓名：</label></td>
<td><inputtype="text"name="usrname"maxlength="50"/></td>
</tr>
<tr>
<td><label>性别：</label></td>
<td><inputtype="radio"name="sex"value="0"/>男<inputtype="radio"name="sex"value="0"/>女</td>
</tr>
<tr>
<td><label>邮件：</label></td>
<td><inputtype="text"name="email"maxlength="100"/></td>
</tr>
<tr>
<td><lable>图像</label></td>
<td>
<tablecellpadding="0"cellspacing="0"class="imgTable">
<tr>
<td><imgsrc="imgs/nophoto.gif"src="imgs/nophoto.gif"class="img"alt="头像"onerror="Javascript:errorImg(this);"
onreadystatechange="Javascript:sizeCheck(this);"/>
</td>
</tr>
<tr>
<td><inputtype="file"name="uploadImg"onchange="Javascript:checkFileChange(this);"
size="12"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<tdcolspan="2"><ahref="Javascript:commit();"rel="externalnofollow"rel="externalnofollow"href="Javascript:commit();"rel="externalnofollow"rel="externalnofollow">注册</a></td>
</tr>
</table>
</form>
</body>
</html>

相关文章