上传图片本地预览缩小图片

最新推荐文章于 2023-05-19 11:19:19 发布

dickc

最新推荐文章于 2023-05-19 11:19:19 发布

阅读量1.2k

点赞数

分类专栏： ASP 文章标签： function input upload border action image

本文链接：https://blog.csdn.net/dickc/article/details/1628837

版权

ASP 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<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" οnsubmit="return OnSubmitForm()" target="frmDoUpload">
<tr>
  <td width="100%"><input type="file" name="upfile" id="upfile" οnchange="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>