图片上传验证（height,width,size）

最新推荐文章于 2024-02-01 18:22:34 发布

最新推荐文章于 2024-02-01 18:22:34 发布 · 318 阅读

文章标签：

#JavaScript #HTML #ViewUI

jsf学习专栏收录该内容

4 篇文章

订阅专栏

<!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   LANGUAGE="JavaScript"><!--   
function   CheckFileSize(){
    var picsize=100*1024;
    var s = document.Myform.photo.value;   
    if(s==" ")return true;   
    var img = new Image();   
    img.src = s;
    var filename=document.getElementById('aaa').value;
    //图片的长和宽的验证（单位为像素）
    if(img.width > 150 || img.height > 300){
        alert("高 = "+ img.height + "\n宽 = "+ img.width); 
        alert("图片的高应<150,宽应<300");
    }
    //图片大小的验证（单位为字节）
    if(img.fileSize > picsize){
        alert("fileSize = "+ img.fileSize +" 字节"); 
        alert("图片应<300KB");
    }
    //删除文本框内的图片路径
    document.getElementById("photo").select();
    document.execCommand("Delete");   
}   
//--></SCRIPT> 
<SCRIPT LANGUAGE="JavaScript"><!--
//图片类型的验证
function   CheckFileType(){
    var filename=document.getElementById('aaa').value;
    if(filename.lastIndexOf(".")!=-1){
        var fileType = (filename.substring(filename.lastIndexOf(".")+1,filename.length)).toLowerCase();
        var suppotFile = new Array();
        suppotFile[0] = "jpeg";
        suppotFile[1] = "jpg";
        suppotFile[2] = "gif";
        suppotFile[3] = "png";
        suppotFile[4] = "bmp";
        for(var i =0;i<suppotFile.length;i++){
            if(suppotFile[i]==fileType){
                return true;
            }else{
                continue;
            }
        }
        window.alert("不支持文件类型"+fileType);
        alert("只支持JPEG.JPG.GIF.PNG.BMP五种图片格式");
        //document.Myform.reset();//清空整个form
        document.getElementById("photo").select();
        document.execCommand("Delete");
    }else{
        alert("只支持JPEG.JPG.GIF.PNG.BMP五种图片格式");
        document.getElementById("photo").select();
        document.execCommand("Delete");
    }
}
//--></SCRIPT>
</HEAD>

<BODY>
<form   name=Myform  onsubmit="return   CheckFileSize()">   
  <input   id="aaa" type=file   name=photo onchange="CheckFileType()"><br/>   
  <input   type=submit   value=submit>
</form>   
</BODY>
</HTML>