欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-05 09:12:51
<%@language=jscript @codepage=936%> 
<%@language=jscript @codepage=936%> 
<script language=jscript runat=server> 
/****************************************************************\ 
<lostinet:source xmlns:lostinet="lostinet-d2g-com/source"> 
 <lostinet:source-info> 
  <lostinet:name>lostinet_asp_upload的例子-动态表单部分</lostinet:name> 
  <lostinet:description>一个动态的表单的例子</lostinet:description> 
 </lostinet:source-info> 
 <lostinet:author-info> 
  <lostinet:name>lostinet</lostinet:name> 
  <lostinet:email>lostinet@21cn.com;lostinet@chongjian.com;</lostinet:email> 
  <lostinet:homepage>http://lostinet.d2g.com</lostinet:homepage> 
 </lostinet:author-info> 
 <lostinet:copyright-info> 
  <lostinet:copyright>版权声明:这个软件可以随意发布。也可以根据具体情况进行优化修改。但是请保留作者的相关信息。</lostinet:copyright> 
 </lostinet:copyright-info> 
</lostinet:source> 
\****************************************************************/ 
</script> 
<script runat=server language=jscript> 
</script> 
<html> 
 <head> 
 <title>jscript example form</title> 
 <meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
 </head> 
<style> 
button 

 border:1px gray solid; 

div.form_item 

 width:500px; 
 overflow-x:visible; 
 padding:4px; 
 margin-top:8px; 
 border:2px gray dotted; 

input.file 

 border:1px gray inset; 
 width:400px; 

textarea.info 

 border:1px gray inset; 
 width:400px; 
 scrollbar-face-color: #cccccc; 
 scrollbar-highlight-color: white; 
 scrollbar-shadow-color: white; 
 scrollbar-arrow-color: maroon;  
 scrollbar-track-color: #e0e4e4; 
 scrollbar-3dlight-color: #cccccc; 
 scrollbar-darkshadow-color: #cccccc; 
 scrollbar-base-color: #cccccc; 

</style> 
<script> 
var countimgloading=0; 
function getitemdiv(e) 

 while(e=e.parentelement) 
 { 
  if(e.classname.tolowercase()=="form_item") 
  { 
   return e; 
  } 
 } 
 throw(new error(-1,"impossible:getitemdiv发生不能处理的意外")); 

function getnameditem(div,name) 

 return div.all(name); 
 throw(new error(-11,"impossible:getnameditem发生不能处理的意外"+name)); 

function check_item(div) 

 var file=getnameditem(div,"file"); 
 var info=getnameditem(div,"info"); 
 var width=getnameditem(div,"width"); 
 var height=getnameditem(div,"height"); 
 var preview=getnameditem(div,"preview"); 
 if(file.value.replace(/\s/g,"")=="") 
 { 
  file.focus(); 
  return false; 
 } 
 if(info.value.replace(/\s/g,"")=="") 
 { 
  info.focus(); 
  return false; 
 } 
 if(info.value.length>1000) 
 { 
  alert("描述的长度不能超过1000字"); 
  info.focus(); 
  return false; 
 } 
 if(height.value=="0"||width.value=="0") 
 { 
  file.focus(); 
  return false; 
 } 
 if(parseint(height.value)>800||parseint(width.value)>600) 
 { 
  alert("图片尺寸大于800x600"); 
  file.focus(); 
  return false; 
 } 
 if(preview.src.tolowercase().indexof("file://")!=0) 
 { 
  alert("只能上传本地文件!!\n请把文件框的内容清楚\n然后按浏览"); 
  file.focus(); 
  return false; 
 } 
 if(preview.filesize==0) 
 { 
  file.focus(); 
  return false; 
 } 
 return preview.filesize; 

function check_form() 

 if(event==null)var event=new object(); 
 var totalsize=0; 
 var haveitem=false; 
 var coll=form_submit.children; 
 for(var i=0;i<coll.length;i++) 
 { 
  var item=coll.item(i); 
  if(item.classname.tolowercase()=="form_item") 
  { 
   haveitem=true; 
   totalsize=check_item(item); 
   if(totalsize==false) 
   { 
    alert("该输入框必须填上正确的内容"); 
    return event.returnvalue=false; 
   } 
  } 
 } 
 if(haveitem==false) 
 { 
  add_formitem(); 
  return event.returnvalue=false; 
 } 
 if(totalsize==0) 
 { 
  alert("不打算上传了");//暂时没有可能执行 
  return event.returnvalue=false; 
 } 
 if(totalsize>1024*1024) 
 { 
  alert("不能上传超过1m的数据"); 
  return event.returnvalue=false; 
 } 
 btn_submit.disabled=true; 
 return event.returnvalue=true; 

function add_formitem() 

 form_submit.elements("input_submit").insertadjacenthtml("beforebegin",form_template.innerhtml); 

function delete_formitem() 

 var btn=event.srcelement; 
 getitemdiv(btn).removenode(true); 

function show_preview() 

 var div=getitemdiv(event.srcelement); 
 var preview=getnameditem(div,"preview"); 
 var file=getnameditem(div,"file"); 
 if(preview.readystate=="uninitialized"||preview.readystate=="complate")countimgloading++; 
 btn_submit.disabled=true; 
 preview.src=file.value; 

function onpreviewload(secceed) 

 btn_submit.disabled=false;//bug:当表单在提交的时候,忽略 
 countimgloading--; 
 var div=getitemdiv(event.srcelement); 
 var preview=getnameditem(div,"preview"); 
 var height=getnameditem(div,"height"); 
 var width=getnameditem(div,"width"); 
 if(secceed) 
 { 
  height.value=preview.height; 
  width.value=preview.width; 
 } 
 else 
 { 
  height.value=width.value="0"; 
 } 
 var filesize=getnameditem(div,"filesize"); 
 filesize.innertext=math.floor(preview.filesize/1024)+"k"; 

function onpreviewmouseover(div) 

 if(div.contains(event.fromelement))return; 
 var divitem=getitemdiv(div); 
 var preview=getnameditem(divitem,"preview"); 
 div.style.overflow="visible"; 
 preview.style.position="absolute"; 

function onpreviewmouseout(div) 

 if(div.contains(event.toelement))return; 
 var divitem=getitemdiv(div); 
 var preview=getnameditem(divitem,"preview"); 
 div.style.overflow="hidden"; 
 preview.style.position="static"; 

function onpreviewclick(div) 

 var divitem=getitemdiv(event.srcelement); 
 var preview=getnameditem(divitem,"preview"); 
 div.style.overflow="hidden"; 
 preview.style.position="static"; 

</script> 
<body> 
 <div> 
  <button id="btn_add">添加一个需要上传的图片</button> 
  <button id="btn_submit">提交所有内容</button> 
 </div> 
 <div> 
 <form id="form_submit" action="e.g.jscript.action.asp" method="post" enctype="multipart/form-data" onsubmit="check_from()"> 
  <input id="input_submit" type="submit" style="display:none">  
 </form> 
 </div> 

 <form id="form_template" style="display:none;"> 
  <div class="form_item"> 
   <div> 
    要上传图片(<span id="filesize"></span>)的路径:    <button class="delete" onclick="delete_formitem()">删除</button> 
   </div> 
   <div style="border:1px orange solid;width:200px;height:50px;overflow:hidden;" onmouseover="onpreviewmouseover(this)" onmouseout="onpreviewmouseout(this)" onclick="onpreviewclick(this)"> 
    <input type="hidden" name="width" value="0"> 
    <input type="hidden" name="height" value="0"> 
    <img id="preview" style="position:static" onload="onpreviewload(true)" onerror="onpreviewload(false)"> 
   </div> 
   <div> 
    <input type="file" name="file" class="file" onchange="show_preview()"> 
   </div> 
   <div> 
    相关的描述: 
   </div> 
   <div> 
    <textarea name="info" class="info" rows="4"></textarea> 
   </div> 
  </div> 
 </form> 
</body> 
<script> 
add_formitem(); 
function btn_add.onclick() 

 add_formitem(); 

function btn_submit.onclick() 

 if(check_form()) 
  form_submit.submit(); 

</script> 
</html>