图片上传预览，可显示文件大小，宽、高页面特效__脚本特效

图片上传预览，可显示文件大小，宽、高

时间： 2008-10-21 10:35:03　阅读次数：2824

图片上传预览，可显示文件大小，宽、高

<HTML>
<HEAD>
	<title>Upload Image</title>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</HEAD>
<STYLE type="text/css">
* {font-size:9pt;font-family:SimSun}
body {margin:0px;overflow:hidden}
#upfile {width:100%}
#preview {width:100%;height:100%;overflow:hidden;background-color:#808080;margin:auto}
#pv {display:none}
</STYLE>
<script language="JScript">
var obImg = new Image();
var validExt = ".jpg|.jpeg|.gif|.bmp|.png|";
var bOK = false;
function ShowInfo(sInfo)
{
	document.all["info"].innerText = sInfo;
}
function CheckProperty()
{
	if(obImg.readyState != "complete")
	{
		setTimeout("CheckProperty()",500);
		return;
	}
	bOK = true;
	var iImgSize = Math.round(obImg.fileSize / 1024 * 100) / 100;
	ShowInfo("图片大小：" + iImgSize + " KB 图片尺寸：" + obImg.width + " x " + obImg.height);
	var iContentWidth = document.all["preview"].offsetWidth;
	var iContentHeight = document.all["preview"].offsetHeight;
	if(obImg.width > iContentWidth || obImg.height > iContentHeight)
	{
		if(obImg.width <= iContentWidth)
		{
				document.all["pv"].height = iContentHeight;
				document.all["pv"].width = Math.round(iContentHeight * obImg.width / obImg.height);
		}
		else if(obImg.height <= iContentHeight)
		{
				document.all["pv"].width = iContentWidth;
				document.all["pv"].height = Math.round(iContentWidth * obImg.height / obImg.width);
		}
		else
		{
			if(obImg.width / iContentWidth > obImg.height / iContentHeight)
			{
				document.all["pv"].width = iContentWidth;
				document.all["pv"].height = Math.round(iContentWidth * obImg.height / obImg.width);
			}
			else
			{
				document.all["pv"].height = iContentHeight;
				document.all["pv"].width = Math.round(iContentHeight * obImg.width / obImg.height);
			}
		}
	}
	else
	{
		document.all["pv"].width = obImg.width;
		document.all["pv"].height = obImg.height;
	}
	document.all["pv"].src = obImg.src;
	document.all["pv"].style.display = "block";
}
function OnClickUpload()
{
	bOK = false;
	var sFile = document.fmUpload.upfile.value;
	if(/(\.[^\\\/\.]*)$/ig.exec(sFile) == null)
	{
		ShowInfo("图片大小：? KB 图片尺寸：? x ?");
		document.all["pv"].style.display = "none";
		alert("不能识别的文件扩展名！");
		return;
	}
	if(validExt.indexOf(RegExp.$1 + "|") == -1)
	{
		ShowInfo("图片大小：? KB 图片尺寸：? x ?");
		document.all["pv"].style.display = "none";
		alert("不能上传 " + RegExp.$1 + " 格式的文件");
		return;
	}
	obImg.src = sFile;
	setTimeout("CheckProperty()",0);
}
function OnSubmitForm()
{
	alert("test");
	return false;
}
function Upload_Err()
{
	ShowInfo("上传文件失败！");
}
</script>

提示：您可以先修改部分代码再运行