JS客户端验证图片文件类型

发布时间:2020-12-27编辑:脚本学堂
分享一例js验证文件类型的代码,获取图片信息,在客户端验证文件类型,有需要的朋友参考下。

用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>JS 文件大小及类型判断_www.jb200.com</title> 
<mce:style><!--
*{}{ font-size:12px;}
--></mce:style><style mce_bogus="1">*{}{ font-size:12px;}</style> 
<mce:script language="javascript"><!-- 
function ShowInfo(sUrl) 

    var FSO,F,Ext; 
    var Extlist = ".gif.jpg.bmp"; 
    //FSO = new ActiveXObject("Scripting.FileSystemObject"); 
    //F = FSO.GetFile(sUrl); 
    Ext = GetExt(sUrl); 
     
    if(Extlist.indexOf(Ext)==-1) 
        document.getElementById("Info").innerHTML = "扩展名:" + Ext + " 不是图片类型!  原始路径:" + sUrl; 
    else{ 
        document.getElementById("imgs").src = ""; 
        document.getElementById("imgs").alt = "图片加载中……"; 
        document.getElementById("imgs").src = sUrl; 
        var MyImage = new Image(); 
        MyImage.src = sUrl; 
        document.getElementById("Info").innerHTML = "扩展名:" + Ext + " 合法图片类型!  原始路径:" + sUrl + "<br /> 文件大小:" + MyImage.fileSize + " Bytes  尺寸:" + MyImage.width + "*" + MyImage.height; 
    } 

 
function GetExt(sUrl) 

   var arrList = sUrl.split("."); 
   return arrList[arrList.length-1]; 

 
function DrawImage(ImgD,w,h) 

    var flag = false; 
    var MyImage = new Image(); 
    MyImage.src = ImgD.src; 
    if(MyImage.readyState != "complete"){ 
        return false; //确保图片完全加载 
    } 
    if(MyImage.width > 0 && MyImage.height > 0){ 
        flag = true; 
        if(MyImage.width / MyImage.height >= w / h){ 
            if(MyImage.width > w){ 
                ImgD.width = w; 
                ImgD.height = (MyImage.height * w) / MyImage.width; 
            }else{ 
                ImgD.width = MyImage.width; 
                ImgD.height = MyImage.height; 
            } 
            ImgD.alt = "原始尺寸:" + MyImage.width + "x" + MyImage.height; 
        }else{ 
            if(MyImage.height > h){ 
                ImgD.height = h; 
                ImgD.width = (MyImage.width * h) / MyImage.height; 
            }else{ 
                ImgD.width = MyImage.width; 
                ImgD.height = MyImage.height; 
            } 
            ImgD.alt = "原始尺寸:" + MyImage.width + "x" + MyImage.height; 
        } 
    } 

function zoomimg(img) 

    var zoom=parseInt(img.style.zoom,10) || 100; 
    zoom += event.wheelDelta / 24; 
    imgW = img.clientWidth*zoom/100; 
    if (zoom>10) img.style.zoom = zoom + "%"; 
 
    return false; 

// --></mce:script> 
</head> 
 
<body> 
<form id="form1" name="form1" enctype="multipart/form-data" method="post" action=""> 
<p> 
    <input name="ofile" type="file" id="ofile" onchange="ShowInfo(this.value);" /> 
</p> 
<p id="Info"></p> 
<p><img src="#" mce_src="#" id="imgs" width="300" height="300"  onmousewheel="return zoomimg(this)" onload="DrawImage(this,300,300)" /></p> 
</form> 
</body> 
</html>