通过客户端验证上传图片文件大小的ASP源码

时间:2022-09-17 22:56:54
  1. <%@Language=JScript @CodePage=936%>   
  2. <Script Language=JScript RunAt=Server>   
  3. /****************************************************************\   
  4. <lostinet:source xmlns:lostinet="lostinet-d2g-com/source">   
  5.  <lostinet:source-info>   
  6.   <lostinet:name>Lostinet_ASP_Upload的例子-动态表单部分</lostinet:name>   
  7.   <lostinet:description>一个动态的表单的例子</lostinet:description>   
  8.  </lostinet:source-info>   
  9.  <lostinet:author-info>   
  10.   <lostinet:name>Lostinet</lostinet:name>   
  11.   <lostinet:email>lostinet@21cn.com;lostinet@chongjian.com;</lostinet:email>   
  12.   <lostinet:homepage>http://lostinet.d2g.com</lostinet:homepage>   
  13.  </lostinet:author-info>   
  14.  <lostinet:copyright-info>   
  15.   <lostinet:copyright>版权声明:这个软件可以随意发布。也可以根据具体情况进行优化修改。但是请保留作者的相关信息。</lostinet:copyright>   
  16.  </lostinet:copyright-info>   
  17. </lostinet:source>   
  18. \****************************************************************/   
  19. </Script>   
  20. <SCRIPT RUNAT=Server LANGUAGE=JScript>   
  21. </SCRIPT>   
  22. <HTML>   
  23.  <HEAD>   
  24.  <TITLE>JScript Example Form</TITLE>   
  25.  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312" />   
  26.  </HEAD>   
  27. <STYLE>   
  28. button   
  29. {   
  30.  border:1px gray solid;   
  31. }   
  32. div.form_item   
  33. {   
  34.  width:500px;   
  35.  overflow-x:visible;   
  36.  padding:4px;   
  37.  margin-top:8px;   
  38.  border:2px gray dotted;   
  39. }   
  40. input.file   
  41. {   
  42.  border:1px gray inset;   
  43.  width:400px;   
  44. }   
  45. textarea.info   
  46. {   
  47.  border:1px gray inset;   
  48.  width:400px;   
  49.  SCROLLBAR-FACE-COLOR: #cccccc;   
  50.  SCROLLBAR-HIGHLIGHT-COLOR: WHITE;   
  51.  SCROLLBAR-SHADOW-COLOR: WHITE;   
  52.  SCROLLBAR-ARROW-COLOR: maroon;    
  53.  SCROLLBAR-TRACK-COLOR: #e0e4e4;   
  54.  SCROLLBAR-3DLIGHT-COLOR: #cccccc;   
  55.  SCROLLBAR-DARKSHADOW-COLOR: #cccccc;   
  56.  SCROLLBAR-BASE-COLOR: #cccccc;   
  57. }   
  58. </STYLE>   
  59. <SCRIPT>   
  60. var countImgLoading=0;   
  61. function GetItemDiv(e)   
  62. {   
  63.  while(e=e.parentElement)   
  64.  {   
  65.   if(e.className.toLowerCase()=="form_item")   
  66.   {   
  67.    return e;   
  68.   }   
  69.  }   
  70.  throw(new Error(-1,"Impossible:GetItemDiv发生不能处理的意外"));   
  71. }   
  72. function GetNamedItem(div,name)   
  73. {   
  74.  return div.all(name);   
  75.  throw(new Error(-11,"Impossible:GetNamedItem发生不能处理的意外"+name));   
  76. }   
  77. function Check_Item(div)   
  78. {   
  79.  var file=GetNamedItem(div,"file");   
  80.  var info=GetNamedItem(div,"info");   
  81.  var width=GetNamedItem(div,"width");   
  82.  var height=GetNamedItem(div,"height");   
  83.  var preview=GetNamedItem(div,"preview");   
  84.  if(file.value.replace(/\s/g,"")=="")   
  85.  {   
  86.   file.focus();   
  87.   return false;   
  88.  }   
  89.  if(info.value.replace(/\s/g,"")=="")   
  90.  {   
  91.   info.focus();   
  92.   return false;   
  93.  }   
  94.  if(info.value.length>1000)   
  95.  {   
  96.   alert("描述的长度不能超过1000字");   
  97.   info.focus();   
  98.   return false;   
  99.  }   
  100.  if(height.value=="0"||width.value=="0")   
  101.  {   
  102.   file.focus();   
  103.   return false;   
  104.  }   
  105.  if(parseInt(height.value)>800||parseInt(width.value)>600)   
  106.  {   
  107.   alert("图片尺寸大于800X600");   
  108.   file.focus();   
  109.   return false;   
  110.  }   
  111.  if(preview.src.toLowerCase().indexOf("file://")!=0)   
  112.  {   
  113.   alert("只能上传本地文件!!\n请把文件框的内容清楚\n然后按浏览");   
  114.   file.focus();   
  115.   return false;   
  116.  }   
  117.  if(preview.fileSize==0)   
  118.  {   
  119.   file.focus();   
  120.   return false;   
  121.  }   
  122.  return preview.fileSize;   
  123. }   
  124. function Check_Form()   
  125. {   
  126.  if(event==null)var event=new Object();   
  127.  var totalSize=0;   
  128.  var haveItem=false;   
  129.  var coll=form_submit.children;   
  130.  for(var i=0;i<coll.length;i++)   
  131.  {   
  132.   var item=coll.item(i);   
  133.   if(item.className.toLowerCase()=="form_item")   
  134.   {   
  135.    haveItem=true;   
  136.    totalSize=Check_Item(item);   
  137.    if(totalSize==false)   
  138.    {   
  139.     alert("该输入框必须填上正确的内容");   
  140.     return event.returnValue=false;   
  141.    }   
  142.   }   
  143.  }   
  144.  if(haveItem==false)   
  145.  {   
  146.   Add_FormItem();   
  147.   return event.returnValue=false;   
  148.  }   
  149.  if(totalSize==0)   
  150.  {   
  151.   alert("不打算上传了");//暂时没有可能执行   
  152.   return event.returnValue=false;   
  153.  }   
  154.  if(totalSize>1024*1024)   
  155.  {   
  156.   alert("不能上传超过1M的数据");   
  157.   return event.returnValue=false;   
  158.  }   
  159.  btn_submit.disabled=true;   
  160.  return event.returnValue=true;   
  161. }   
  162. function Add_FormItem()   
  163. {   
  164.  form_submit.elements("input_submit").insertAdjacentHTML("beforebegin",form_template.innerHTML);   
  165. }   
  166. function Delete_FormItem()   
  167. {   
  168.  var btn=event.srcElement;   
  169.  GetItemDiv(btn).removeNode(true);   
  170. }   
  171. function Show_Preview()   
  172. {   
  173.  var div=GetItemDiv(event.srcElement);   
  174.  var preview=GetNamedItem(div,"preview");   
  175.  var file=GetNamedItem(div,"file");   
  176.  if(preview.readyState=="uninitialized"||preview.readyState=="complate")countImgLoading++;   
  177.  btn_submit.disabled=true;   
  178.  preview.src=file.value;   
  179. }   
  180. function OnPreviewLoad(secceed)   
  181. {   
  182.  btn_submit.disabled=false;//bug:当表单在提交的时候,忽略   
  183.  countImgLoading--;   
  184.  var div=GetItemDiv(event.srcElement);   
  185.  var preview=GetNamedItem(div,"preview");   
  186.  var height=GetNamedItem(div,"height");   
  187.  var width=GetNamedItem(div,"width");   
  188.  if(secceed)   
  189.  {   
  190.   height.value=preview.height;   
  191.   width.value=preview.width;   
  192.  }   
  193.  else   
  194.  {   
  195.   height.value=width.value="0";   
  196.  }   
  197.  var filesize=GetNamedItem(div,"filesize");   
  198.  filesize.innerText=Math.floor(preview.fileSize/1024)+"K";   
  199. }   
  200. function OnPreviewMouseOver(div)   
  201. {   
  202.  if(div.contains(event.fromElement))return;   
  203.  var divItem=GetItemDiv(div);   
  204.  var preview=GetNamedItem(divItem,"preview");   
  205.  div.style.overflow="visible";   
  206.  preview.style.position="absolute";   
  207. }   
  208. function OnPreviewMouseOut(div)   
  209. {   
  210.  if(div.contains(event.toElement))return;   
  211.  var divItem=GetItemDiv(div);   
  212.  var preview=GetNamedItem(divItem,"preview");   
  213.  div.style.overflow="hidden";   
  214.  preview.style.position="static";   
  215. }   
  216. function OnPreviewClick(div)   
  217. {   
  218.  var divItem=GetItemDiv(event.srcElement);   
  219.  var preview=GetNamedItem(divItem,"preview");   
  220.  div.style.overflow="hidden";   
  221.  preview.style.position="static";   
  222. }   
  223. </SCRIPT>   
  224. <BODY>   
  225.  <DIV>   
  226.   <BUTTON ID="btn_add">添加一个需要上传的图片</BUTTON>   
  227.   <BUTTON ID="btn_submit">提交所有内容</BUTTON>   
  228.  </DIV>   
  229.  <DIV>   
  230.  <FORM ID="form_submit" ACTION="e.g.jscript.action.asp" METHOD="POST" ENCTYPE="multipart/form-data" ONSUBMIT="Check_From()">   
  231.   <INPUT ID="input_submit" TYPE="submit" STYLE="display:none">    
  232.  </FORM>   
  233.  </DIV>   
  234.  
  235.  <FORM ID="form_template" STYLE="display:none;">   
  236.   <DIV CLASS="form_item">   
  237.    <DIV>   
  238.     要上传图片(<SPAN id="filesize"></SPAN>)的路径:    <BUTTON CLASS="delete" ONCLICK="Delete_FormItem()">删除</BUTTON>   
  239.    </DIV>   
  240.    <DIV STYLE="border:1px orange solid;width:200px;height:50px;overflow:hidden;" ONMOUSEOVER="OnPreviewMouseOver(this)" ONMOUSEOUT="OnPreviewMouseOut(this)" ONCLICK="OnPreviewClick(this)">   
  241.     <INPUT TYPE="hidden" NAME="width" VALUE="0">   
  242.     <INPUT TYPE="hidden" NAME="height" VALUE="0">   
  243.     <IMG ID="preview" STYLE="position:static" ONLOAD="OnPreviewLoad(true)" ONERROR="OnPreviewLoad(false)">   
  244.    </DIV>   
  245.    <DIV>   
  246.     <INPUT TYPE="file" NAME="file" CLASS="file" ONCHANGE="Show_Preview()">   
  247.    </DIV>   
  248.    <DIV>   
  249.     相关的描述:   
  250.    </DIV>   
  251.    <DIV>   
  252.     <TEXTAREA NAME="info" CLASS="info" ROWS="4"></TEXTAREA>   
  253.    </DIV>   
  254.   </DIV>   
  255.  </FORM>   
  256. </BODY>   
  257. <SCRIPT>   
  258. Add_FormItem();   
  259. function btn_add.onclick()   
  260. {   
  261.  Add_FormItem();   
  262. }   
  263. function btn_submit.onclick()   
  264. {   
  265.  if(Check_Form())   
  266.   form_submit.submit();   
  267. }   
  268. </SCRIPT>   
  269. </HTML>