淺析ASP.NET多附件上傳的實現(xiàn)
在寫這篇文章之前我也在Google上找到了很多有關多附件上傳的文章,有用ASP.NET多附件上傳實現(xiàn)的,也有用JSP、PHP等其它技術實現(xiàn)的,但基本前提都是事先通過js腳本來動態(tài)創(chuàng)建DOM,然后上傳的時候在服務端做一下處理,有點類似于163的郵件系統(tǒng)。文件上傳需要通過頁面的POST方法進行提交,這個我在一次MOSS開發(fā)中iFrame表單提交的古怪問題解決一問中已經(jīng)闡述過,其中包括了如何使用頁面隱藏的iFrame來提交表單從而避免整個頁面提交到服務器而導致頁面的刷新。多附件上傳的原理與之類似,只不過需要事先通過腳本在頁面上動態(tài)創(chuàng)建多個input type='file'的標簽,當然,如果要想功能更加完美,你可能還需要通過腳本動態(tài)添加一些按鈕事件以讓用戶可以刪除他所添加的文件。下面是ASP.NET多附件上傳的實現(xiàn)
其中紅色方框內的內容是通過腳本在頁面上動態(tài)創(chuàng)建的,將用戶在客戶端所選文件的文件名動態(tài)添加到一個div里,同時在這個div中放一個隱藏的input type=’file’的標簽,它的value為用戶所選文件的路徑,然后在div中放置一個img,添加onmouseover和onmouseout 事件為圖片增加了一些鼠標滑動時的效果,onclick事件用來響應用戶點擊img時刪除對應的文件??匆幌翧SP.NET多附件上傳的代碼。
- <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind=
 
"Default.aspx.cs"Inherits="WebApplication1._Default"%>- //EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 - <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
 - <headrunatheadrunat="server">
 - <title>< SPAN>title>
 - <scriptsrcscriptsrc="MultiAffix.js"type="text/javascript">< SPAN>script>
 - <scripttypescripttype="text/javascript">
 - varcontrolName=1;//Thisvariableisforthedynamicfilecontrols'sname.
 - functionaddImg(targetElement,savestatsElement,oldimgElement){
 - varbrowseimgElement=$get("browseimg");
 - vararr=browseimgElement.getElementsByTagName('input');
 - if(arr.length==0||arr[0].value.length==0){
 - alert('Nofileinputs.');
 - return;
 - }
 - varoldbrowser=arr[0];
 - varfilename=getfilename(oldbrowser.value);
 - if(!validateimgtype(oldbrowser.value))return;
 - if(!validateimgcount(targetElement,3))return;
 - varimgtitles=savestatsElement.value+oldimgElement.value;
 - if(validateimgexist(filename,imgtitles))
 
{alert('Youhavealreadyaddedthisimage!');return;}- if(oldbrowser!=undefined){
 - varnewbrowser=oldbrowser.cloneNode(true);
 - newbrowser.value='';
 - varnewfile=document.createElement('div');
 - newfile.innerHTML=filename+' ';
 - //Createabuttonelementfordeletetheimage.
 - varnewfileimgbutton=document.createElement('img');
 - newfileimgbutton.src='ShoutOut_Close.gif';
 - newfileimgbutton.alt='Delete';
 - newfileimgbutton.onclick=function(){
 - this.parentNode.parentNode.removeChild(this.parentNode);
 - savestatsElement.value=updatehiddenimgs(filename,savestatsElement.value);
 - }
 - newfileimgbutton.onmouseover=function(){
 - this.src='ShoutOut_Close_rollover.gif';
 - }
 - newfileimgbutton.onmouseout=function(){
 - this.src='ShoutOut_Close.gif';
 - }
 - browseimgElement.replaceChild(newbrowser,oldbrowser);
 - oldbrowser.name=++controlName;
 - oldbrowser.style.display='none';
 - newfile.appendChild(oldbrowser);
 - newfile.appendChild(newfileimgbutton);
 - targetElement.appendChild(newfile);
 - $get("chkAgree").checked=false;
 - $get("btAdd").disabled=true;
 - savestatsElement.value+=filename+'|';
 - }
 - }
 - < SPAN>script>
 - < SPAN>head>
 - <body>
 - <formidformid="form1"runat="server">
 - <asp:ScriptManagerIDasp:ScriptManagerID="ScriptManager1"runat="server">
 - < SPAN>asp:ScriptManager>
 - <div>
 - <div>
 - Description:
 - <asp:TextBoxIDasp:TextBoxID="tbDescription"MaxLength="2000"runat=
 
"server"TextMode="MultiLine">< SPAN>asp:TextBox>- < SPAN>div>
 - <div>
 - Location:
 - <asp:DropDownListIDasp:DropDownListID="ddlLocation"runat="server">
 - < SPAN>asp:DropDownList>
 - < SPAN>div>
 - <div>
 - DisplayPostedByUser:
 - <asp:CheckBoxIDasp:CheckBoxID="chkPostedByUser"Checked="true"runat="server"/>
 - < SPAN>div>
 - <div>
 - NotifyShoutoutUser:
 - <asp:CheckBoxIDasp:CheckBoxID="chkNotifyUser"runat="server"/>
 - < SPAN>div>
 - <div>
 - NotifyShoutouttoEmail:
 - <asp:TextBoxIDasp:TextBoxID="tbShoutoutToEmail"
 
MaxLength="25"runat="server">< SPAN>asp:TextBox>- < SPAN>div>
 - <div>
 - Images:
 - <dividdivid="saveshoutoutimgs"runat="server">
 - < SPAN>div>
 - <inputidinputid="btAddImage"type="button"onclick="$get('saveshoutoutaddimgs').
 
style.display='block';this.disabled=true;"- value="ClickheretoAddImage"/>
 - < SPAN>div>
 - <dividdivid="saveshoutoutdetailshowimg">
 - <dividdivid="saveshoutoutaddimgs"style="display:none;">
 - <div>
 - AddImage:< SPAN>div>
 - <dividdivid="browseimg">
 - <inputtypeinputtype="file"/>
 - < SPAN>div>
 - <div>
 - Sizelimitoftheimagesis100kb.HieghtandWidthoftheimagesshouldnotexceed
 - 200px.< SPAN>div>
 - <div>
 - <inputidinputid="chkAgree"type="checkbox"onclick="$get('btAdd').
 
disabled=!this.checked;"/>I- agree.legalsignofftexttobedefined.
 - < SPAN>div>
 - <div>
 - <inputidinputid="btAdd"disabled="disabled"type="button"value="Add"runat="server"/>
 - < SPAN>div>
 - < SPAN>div>
 - < SPAN>div>
 - < SPAN>div>
 - <asp:TextBoxIDasp:TextBoxID="tbImgs"runat="server"Text="|"Style=
 
"display:none;">< SPAN>asp:TextBox>- <asp:TextBoxIDasp:TextBoxID="tbOldImgs"runat="server"Text="|"Style=
 
"display:none;">< SPAN>asp:TextBox>- < SPAN>form>
 - < SPAN>body>
 - < SPAN>html>
 
【編輯推薦】















 
 
 
 
 
 
 