淺析ASP.NET多附件上傳的實(shí)現(xiàn)
在寫(xiě)這篇文章之前我也在Google上找到了很多有關(guān)多附件上傳的文章，有用ASP.NET多附件上傳實(shí)現(xiàn)的，也有用JSP、PHP等其它技術(shù)實(shí)現(xiàn)的，但基本前提都是事先通過(guò)js腳本來(lái)動(dòng)態(tài)創(chuàng)建DOM，然后上傳的時(shí)候在服務(wù)端做一下處理，有點(diǎn)類(lèi)似于163的郵件系統(tǒng)。文件上傳需要通過(guò)頁(yè)面的POST方法進(jìn)行提交，這個(gè)我在一次MOSS開(kāi)發(fā)中iFrame表單提交的古怪問(wèn)題解決一問(wèn)中已經(jīng)闡述過(guò)，其中包括了如何使用頁(yè)面隱藏的iFrame來(lái)提交表單從而避免整個(gè)頁(yè)面提交到服務(wù)器而導(dǎo)致頁(yè)面的刷新。多附件上傳的原理與之類(lèi)似，只不過(guò)需要事先通過(guò)腳本在頁(yè)面上動(dòng)態(tài)創(chuàng)建多個(gè)input type='file'的標(biāo)簽，當(dāng)然，如果要想功能更加完美，你可能還需要通過(guò)腳本動(dòng)態(tài)添加一些按鈕事件以讓用戶(hù)可以刪除他所添加的文件。下面是ASP.NET多附件上傳的實(shí)現(xiàn)
其中紅色方框內(nèi)的內(nèi)容是通過(guò)腳本在頁(yè)面上動(dòng)態(tài)創(chuàng)建的，將用戶(hù)在客戶(hù)端所選文件的文件名動(dòng)態(tài)添加到一個(gè)div里，同時(shí)在這個(gè)div中放一個(gè)隱藏的input type=’file’的標(biāo)簽，它的value為用戶(hù)所選文件的路徑，然后在div中放置一個(gè)img，添加onmouseover和onmouseout 事件為圖片增加了一些鼠標(biāo)滑動(dòng)時(shí)的效果，onclick事件用來(lái)響應(yīng)用戶(hù)點(diǎn)擊img時(shí)刪除對(duì)應(yīng)的文件。看一下ASP.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>title>
- <scriptsrcscriptsrc="MultiAffix.js"type="text/javascript">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+'|';
- }
- }
- script>
- head>
- <body>
- <formidformid="form1"runat="server">
- <asp:ScriptManagerIDasp:ScriptManagerID="ScriptManager1"runat="server">
- asp:ScriptManager>
- <div>
- <div>
- Description:
- <asp:TextBoxIDasp:TextBoxID="tbDescription"MaxLength="2000"runat=
"server"TextMode="MultiLine">asp:TextBox>- div>
- <div>
- Location:
- <asp:DropDownListIDasp:DropDownListID="ddlLocation"runat="server">
- asp:DropDownList>
- div>
- <div>
- DisplayPostedByUser:
- <asp:CheckBoxIDasp:CheckBoxID="chkPostedByUser"Checked="true"runat="server"/>
- div>
- <div>
- NotifyShoutoutUser:
- <asp:CheckBoxIDasp:CheckBoxID="chkNotifyUser"runat="server"/>
- div>
- <div>
- NotifyShoutouttoEmail:
- <asp:TextBoxIDasp:TextBoxID="tbShoutoutToEmail"
MaxLength="25"runat="server">asp:TextBox>- div>
- <div>
- Images:
- <dividdivid="saveshoutoutimgs"runat="server">
- div>
- <inputidinputid="btAddImage"type="button"onclick="$get('saveshoutoutaddimgs').
style.display='block';this.disabled=true;"- value="ClickheretoAddImage"/>
- div>
- <dividdivid="saveshoutoutdetailshowimg">
- <dividdivid="saveshoutoutaddimgs"style="display:none;">
- <div>
- AddImage:div>
- <dividdivid="browseimg">
- <inputtypeinputtype="file"/>
- div>
- <div>
- Sizelimitoftheimagesis100kb.HieghtandWidthoftheimagesshouldnotexceed
- 200px.div>
- <div>
- <inputidinputid="chkAgree"type="checkbox"onclick="$get('btAdd').
disabled=!this.checked;"/>I- agree.legalsignofftexttobedefined.
- div>
- <div>
- <inputidinputid="btAdd"disabled="disabled"type="button"value="Add"runat="server"/>
- div>
- div>
- div>
- div>
- <asp:TextBoxIDasp:TextBoxID="tbImgs"runat="server"Text="|"Style=
"display:none;">asp:TextBox>- <asp:TextBoxIDasp:TextBoxID="tbOldImgs"runat="server"Text="|"Style=
"display:none;">asp:TextBox>- form>
- body>
- html>
【編輯推薦】
