上传图片本地预览缩小图片
2007-05-28 22:55
375 查看
<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>
<BODY">
<table align="center" width="50%" height="50%" border="1" cellspacing="0">
<form name="fmUpload" action="upload-do.php" method="post" enctype="multipart/form-data" onsubmit="return OnSubmitForm()" target="frmDoUpload">
<tr>
<td width="100%"><input type="file" name="upfile" id="upfile" onchange="OnClickUpload()"></td>
<td>
<input type="submit" name="bnSubmit" value="上传">
<input type="hidden" name="fileExt">
<input type="hidden" name="picType">
<input type="hidden" name="isAutoSmall">
</td>
</tr>
<tr><td align="center" id="info" colspan="2"> </td></tr>
<tr>
<td height="100%" colspan="2" align="center" valign="middle">
<div id="preview"><img id="pv"></div>
</td>
</tr>
<tr style="display:none">
<td colspan="2" height=50></td>
</tr>
</form>
</table>
</BODY>
</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>
<BODY">
<table align="center" width="50%" height="50%" border="1" cellspacing="0">
<form name="fmUpload" action="upload-do.php" method="post" enctype="multipart/form-data" onsubmit="return OnSubmitForm()" target="frmDoUpload">
<tr>
<td width="100%"><input type="file" name="upfile" id="upfile" onchange="OnClickUpload()"></td>
<td>
<input type="submit" name="bnSubmit" value="上传">
<input type="hidden" name="fileExt">
<input type="hidden" name="picType">
<input type="hidden" name="isAutoSmall">
</td>
</tr>
<tr><td align="center" id="info" colspan="2"> </td></tr>
<tr>
<td height="100%" colspan="2" align="center" valign="middle">
<div id="preview"><img id="pv"></div>
</td>
</tr>
<tr style="display:none">
<td colspan="2" height=50></td>
</tr>
</form>
</table>
</BODY>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js 本地图片未上传先预览(等比缩小图片内容大小)
- js图片上传获取本地地址预览
- 上传图片的本地预览
- 关于IE6和IE7关闭窗口时提示和不提示以及上传图片前的本地预览解决办法
- 预览待上传的本地图片
- 实现图片上传前本地预览功能之二
- JQuery插件：图片上传本地预览插件，改进案例一则。
- ie8本地图片上传预览示例代码
- 在线图片上传、预览、裁切、放大、缩小之 cropbox.js 的应用
- 图片上传本地预览
- JS上传图片本地实时预览缩略图
- [AS3]纯AS代码实现可预览本地图片的flash上传客户端
- 预览上传的本地图片
- 详解nodejs实现本地上传图片并预览功能（express4.0+）
- 图片上传本地预览
- 兼容ie6、ie7、ie8 和FF的本地上传图片预览，并客户端判断文件大小和文件格式
- 网页上传图片时，直接本地预览无需上传服务器
- 实现本地图片预览上传的功能
- [AS3]纯AS代码实现可预览本地图片的flash上传客户端[转]
- 图片上传前的本地预览，兼容IE的方法