新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
淺析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)

其中紅色方框內(nèi)的內(nèi)容是通過腳本在頁面上動態(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> - <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>
- <formidformid="form1"runat="server">
- <asp:ScriptManagerIDasp:ScriptManagerID="ScriptManager1"runat="server">
- asp:ScriptManager>
- Description:
- <asp:TextBoxIDasp:TextBoxID="tbDescription"MaxLength="2000"runat=
"server"TextMode="MultiLine"> asp:TextBox>- div>
- Location:
- <asp:DropDownListIDasp:DropDownListID="ddlLocation"runat="server">
- asp:DropDownList>
- div>
- DisplayPostedByUser:
- <asp:CheckBoxIDasp:CheckBoxID="chkPostedByUser"Checked="true"runat="server"/>
- div>
- NotifyShoutoutUser:
- <asp:CheckBoxIDasp:CheckBoxID="chkNotifyUser"runat="server"/>
- div>
- NotifyShoutouttoEmail:
- <asp:TextBoxIDasp:TextBoxID="tbShoutoutToEmail"
MaxLength="25"runat="server"> asp:TextBox>- 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;">
- AddImage: div>
- <dividdivid="browseimg">
- <inputtypeinputtype="file"/>
- div>
- Sizelimitoftheimagesis100kb.HieghtandWidthoftheimagesshouldnotexceed
- 200px. div>
- <inputidinputid="chkAgree"type="checkbox"onclick="$get('btAdd').
disabled=!this.checked;"/>I- agree.legalsignofftexttobedefined.
- 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>
【編輯推薦】
- ASP.NET插件的實現(xiàn)方式
- 概述ASP.NET應用程序
- 淺談ASP.NET 2.0數(shù)據(jù)綁定
- ASP.NET阻止Java Script注入式攻擊
- ASP.NET MVC使用T4
標題名稱:淺析ASP.NET多附件上傳的實現(xiàn)
分享網(wǎng)址:http://www.fisionsoft.com.cn/article/cdcdjdd.html


咨詢
建站咨詢
