在写这篇文章之前我也在Google上找到了很多有关多附件上传的文章,有用ASP.NET多附件上传实现的,也有用JSP、PHP等其它技术实现的,但基本前提都是事先通过js脚本来动态创建DOM,然后上传的时候在服务端做一下处理,有点类似于163的邮件系统。文件上传需要通过页面的POST方法进行提交,这个我在一次MOSS开发中iFrame表单提交的古怪问题解决一问中已经阐述过,其中包括了如何使用页面隐藏的iFrame来提交表单从而避免整个页面提交到服务器而导致页面的刷新。多附件上传的原理与之类似,只不过需要事先通过脚本在页面上动态创建多个input type='file'的标签,当然,如果要想功能更加完美,你可能还需要通过脚本动态添加一些按钮事件以让用户可以删除他所添加的文件。下面是ASP.NET多附件上传的实现
其中红色方框内的内容是通过脚本在页面上动态创建的,将用户在客户端所选文件的文件名动态添加到一个div里,同时在这个div中放一个隐藏的input type=’file’的标签,它的value为用户所选文件的路径,然后在div中放置一个img,添加onmouseover和onmouseout 事件为图片增加了一些鼠标滑动时的效果,onclick事件用来响应用户点击img时删除对应的文件。看一下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">
< 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>
- <formidformid="form1"runat="server">
- <asp:ScriptManagerIDasp:ScriptManagerID="ScriptManager1"runat="server">
- < SPAN>asp:ScriptManager>
- Description:
- <asp:TextBoxIDasp:TextBoxID="tbDescription"MaxLength="2000"runat=
"server"TextMode="MultiLine">< SPAN>asp:TextBox>- < SPAN>div>
- Location:
- <asp:DropDownListIDasp:DropDownListID="ddlLocation"runat="server">
- < SPAN>asp:DropDownList>
- < SPAN>div>
- DisplayPostedByUser:
- <asp:CheckBoxIDasp:CheckBoxID="chkPostedByUser"Checked="true"runat="server"/>
- < SPAN>div>
- NotifyShoutoutUser:
- <asp:CheckBoxIDasp:CheckBoxID="chkNotifyUser"runat="server"/>
- < SPAN>div>
- NotifyShoutouttoEmail:
- <asp:TextBoxIDasp:TextBoxID="tbShoutoutToEmail"
MaxLength="25"runat="server">< SPAN>asp:TextBox>- < SPAN>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;">
- AddImage:< SPAN>div>
- <dividdivid="browseimg">
- <inputtypeinputtype="file"/>
- < SPAN>div>
- Sizelimitoftheimagesis100kb.HieghtandWidthoftheimagesshouldnotexceed
- 200px.< SPAN>div>
- <inputidinputid="chkAgree"type="checkbox"onclick="$get('btAdd').
disabled=!this.checked;"/>I- agree.legalsignofftexttobedefined.
- < SPAN>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>
【编辑推荐】
- ASP.NET插件的实现方式
- 概述ASP.NET应用程序
- 浅谈ASP.NET 2.0数据绑定
- ASP.NET阻止Java Script注入式攻击
- ASP.NET MVC使用T4
下一篇:高手总结CSS书写技巧
相关内容
热门资讯如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...2012年第四季度互联网状况报... [[71653]] 北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...