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

471 查看

<%@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>

最近更新的内容
你可能感兴趣的文章

2024 - 快车库 - 我的知识库 重庆启连科技有限公司 渝ICP备16002641号-10
企客连连 表单助手 企服开发 榜单123

渝公网安备 50010702501581号