您的位置：首页 > Web前端 > JavaScript

JS 客户端验证文件类型，获取图片信息

2009-04-26 14:10 926 查看

<!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>
<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>

转自http://www.cnblogs.com/nina-piaoye/archive/2007/10/19/930741.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航