快速业务通道

如何用ASP.NET实现多附件上传?

作者 佚名技术 来源 NET编程 浏览 发布时间 2012-04-10

在写这篇文章之前我也在Google上找到了很多有关多附件上传的文章,有用ASP.NET实现的,也有用JSP、PHP等其它技术实现的,但基本前提都是事先通过js脚本来动态创建DOM,然后上传的时候在服务端做一下处理,有点类似于163的邮件系统。文件上传需要通过页面的POST方法进行提交,这个我在一次MOSS开发中iFrame表单提交的古怪问题解决一问中已经阐述过,其中包括了如何使用页面隐藏的iFrame来提交表单从而避免整个页面提交到服务器而导致页面的刷新。多附件上传的原理与之类似,只不过需要事先通过脚本在页面上动态创建多个input type=''file''的标签,当然,如果要想功能更加完美,你可能还需要通过脚本动态添加一些按钮事件以让用户可以删除他所添加的文件。下面是一个应用效果的截图。

 

其中红色方框内的内容是通过脚本在页面上动态创建的,将用户在客户端所选文件的文件名动态添加到一个div里,同时在这个div中放一个隐藏的input type=’file’的标签,它的value为用户所选文件的路径,然后在div中放置一个img,添加onmouseover和onmouseout事件为图片增加了一些鼠标滑动时的效果,onclick事件用来响应用户点击img时删除对应的文件。看一下代码中的具体实现。

以下为引用的内容:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    
<title></title>
    
<script src="MultiAffix.js" type="text/javascript"></script>
    
<script type="text/javascript">
        
var controlName = 1// This variable is for the dynamic file controls''s name.

        
function addImg(targetElement, savestatsElement, oldimgElement) {
            
var browseimgElement = $get("browseimg");
            
var arr = browseimgElement.getElementsByTagName(''input'');
            
if (arr.length == 0 || arr[0].value.length == 0) {

                alert(
''No file inputs.'');
                
return;
            }
            
var oldbrowser = arr[0];
            
var filename = getfilename(oldbrowser.value);
            
if (!validateimgtype(oldbrowser.value)) return;
            
if (!validateimgcount(targetElement, 3)) return;
            
var imgtitles = savestatsElement.value + oldimgElement.value;
            
if (validateimgexist(filename, imgtitles)) { alert(''You have already added this image!''); return; }
            
if (oldbrowser != undefined) {
                
var newbrowser = oldbrowser.cloneNode(true);
                newbrowser.value 
= '''';
                
var newfile = document.createElement(''div'');
                newfile.innerHTML 
= filename + ''&nbsp;&nbsp;'';

                
// Create a button element for delete the image.
                var newfileimgbutton = 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>
    
<form id="form1" runat="server">
    
<asp:ScriptManager ID="ScriptManager1" runat="server">
    
</asp:ScriptManager>
    
<div>
        
<div>
            Description:
            
<asp:TextBox ID="tbDescription" MaxLength="2000" runat="server" TextMode="MultiLine"></asp:TextBox>
        
</div>
        
<div>
            Location:
            
<asp:DropDownList ID="ddlLocation" runat="server">
            
</asp:DropDownList>
        
</div>
        
<div>
            Display Posted By User:
            
<asp:CheckBox ID="chkPostedByUser" Checked="true" runat="server" />
        
</div>
        
<div>
            Notify Shout out User:
            
<asp:CheckBox ID="chkNotifyUser" runat="server" />
        
</div>
        
<div>
            Notify Shout out to Email:
            
<asp:TextBox ID="tbShoutoutToEmail" MaxLength="25" runat="server"></asp:TextBox>
        
</div>
        
<div>
            Images:
            
<div id="saveshoutoutimgs" runat="server">
            
</div>
            
<input id="btAddImage" type="button" onclick="$get(''saveshoutoutaddimgs'').style.display=''block'';this.disabled=true;"
                value
="Click here to Add Image" />
        
</div>
        
<div id="saveshoutoutdetailshowimg">
            
<div id="saveshoutoutaddimgs" style="display: none;">
                
<div>
                    Add Image:
</div>
                
<div id="browseimg">
                    
<input type="file" />
                
</div>
                
<div>
                    Size limit of the images is 100kb. Hieght and Width of the images should not exceed
                    200px.
</div>
                
<div>
                    
<input id="chkAgree" type="checkbox" onclick="$get(''btAdd'').disabled=!this.checked;" />I
                    agree如何用ASP.NET实现多附件上传?.legal signoff text to be defined.
                
</div>
                
<div>
                    
<input id="btAdd" disabled="disabled" type="button" value="Add" runat="server" />
                
</div>
            
</div>
        
</div>
    
</div>
    
<asp:TextBox ID="tbImgs" runat="server" Text="|" Style="display: none;"></asp:TextBox>
    
<asp:TextBox ID="tbOldImgs" runat="server" Text="|" Style="display: none;"></asp:TextBox>
    
</form>
</body>
</html>

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号