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 文件大小及类型判断</title>
<style>
*
{ font-size:12px;}
</style>
<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;
}

-->
</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>
<id="Info"></p>
<p><img src="#" id="imgs" width="300" height="300"  onmousewheel="return zoomimg(this)" onload="DrawImage(this,300,300)" /></p>
</form>
</body>
</html>
posted @ 2007-10-19 17:09  Nina  阅读(2375)  评论(0编辑  收藏  举报