zoukankan      html  css  js  c++  java

  • 使用ASP.NET上传多个文件到服务器

    在Email系统中经常会上传多个文件到服务器，用户大多习惯一次上传所有的文件，而不是逐个上传，我们可以使用javascript动态地添加file元素到表单，然后在服务器端处理这些file

    效果图如下:

    多文件上传

    页面代码MutlileFileUpload.aspx如下:

     

    [html]  view plain copy
     
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="MutlileFileUpload.aspx.cs"  
    2.     Inherits="MutlileFileUpload" %>  
    3.   
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    5.   
    6. <html xmlns="http://www.w3.org/1999/xhtml">  
    7. <head>  
    8.     <title>多文件上传到服务器Demo</title>  
    9.     <link href="css/writemail.css" rel="stylesheet" type="text/css" />  
    10.     <script type="text/javascript">  
    11. <!--  
    12.         var MAXFILES = 5;        //文件计数器         
    13.         var fileCount = 0;  
    14.         function addAttach(noAlert) {  
    15.             if (fileCount >= MAXFILES && !noAlert) { alert("最多只能添加" + MAXFILES + "个附件！"); return; }  
    16.   
    17.             var fileSectionDiv = document.getElementById("files");  
    18.             var fileItemDiv = document.createElement("div");  
    19.             fileCount++;  
    20.             var content = "<input type='file' onchange='return addAttach(true);' name='fileUpload'" + fileCount + "> <a href='#' onclick='return delAttach("" + fileCount + "")' class='delete_attach' >移除附件</a>";  
    21.             fileItemDiv.id = "fileItemDiv" + fileCount;  
    22.             fileItemDiv.innerHTML = content;  
    23.             fileSectionDiv.appendChild(fileItemDiv);   
    24.              return false;  
    25.          }  
    26.   
    27.          function delAttach(fileIndex) {  
    28.              var fileSectionDiv = document.getElementById("files");  
    29.              var fileItemDiv = document.getElementById("fileItemDiv" + fileIndex);  
    30.              fileSectionDiv.removeChild(fileItemDiv);  
    31.              fileCount--;  
    32.              return false;   
    33.         }    //   
    34.  --></script>  
    35. </head>  
    36. <body>  
    37.     <form id="form1" runat="server">  
    38.     <div>  
    39.         <a id="addAttach_a" onclick="return addAttach(false);" href="#"  class="add_attach">添加附件</a>  
    40.         <div id="files">  
    41.         </div>  
    42.         <asp:Button ID="btnSend" runat="server" Text="发送" OnClick="btnSend_Click" />  
    43.     </div>  
    44.     </form>  
    45. </body>  
    46. </html>  

     

    样式表WriteMail.css代码如下:

    [css]  view plain copy
     
    1. .delete_attach {PADDING-LEFT: 18px; BACKGROUND: url(../images/deleteattch_icon.gif) no-repeat left top; MARGIN-LEFT: 7px; WIDTH: 90px; COLOR: #002f76}.add_attach {PADDING-LEFT: 22px; BACKGROUND: url(../images/attach.gif) no-repeat left center; WIDTH: 90px; COLOR: #002f76}  


     

    后台代码MutlileFileUpload.aspx.cs如下:

     

    [csharp]  view plain copy
     
    1. using System;  
    2. using System.IO;  
    3. using System.Web.UI;  
    4.   
    5. public partial class MutlileFileUpload : System.Web.UI.Page  
    6. {  
    7.     protected void Page_Load(object sender, System.EventArgs e)  
    8.     {        //告诉表单如何格式化文件信息   
    9.         Page.Form.Enctype = "multipart/form-data";  
    10.     }  
    11.     protected void btnSend_Click(object sender, EventArgs e)  
    12.     {  
    13.         for (int index = 0; index < Request.Files.Count; index++)  
    14.         {  
    15.             if (!string.IsNullOrEmpty(Request.Files[index].FileName))  
    16.             {  
    17.                 Request.Files[index].SaveAs(Path.Combine(Server.MapPath("Files"), System.IO.Path.GetFileName(Request.Files[index].FileName)));  
    18.             }  
    19.         }  
    20.     }  
    21. }  
  • 相关阅读:
    XPah学习
    .NET在后置代码中输入JS提示语句（背景不会变白）
    .Net 使用文件上传控件FileUpload上传图片
    OnClientClick和OnClick同时使用！
    OnClientClick的用法
    mysql获得自增字段下一个值
    jQuery插件之ajaxFileUpload
    委托、匿名方法、Lambda表达式的演进
    js实现页面传值
    Entity Framework 学习初级篇--基本操作：增加、更新、删除、事务(转)
  • 原文地址：https://www.cnblogs.com/james1207/p/3367912.html
Copyright © 2011-2022 走看看