通過用戶端驗證上傳圖片檔案大小的ASP源碼_應用技巧

來源:互聯網
上載者:User
<%@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>
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.