多文件上传 js实现
可以动态添加输入表单，上传的文件数量没有限制。
Aspx代码：
View Code
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MultipleFileUpload._Default" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title>Untitled Page</title>
7
8 <script type="text/javascript" language="javascript">
9 function addFile() {
10 var div = document.createElement("div");
11 var f = document.createElement("input");
12 f.setAttribute("type", "file")
13 f.setAttribute("name", "File")
14 f.setAttribute("size", "50")
15 div.appendChild(f)
16 var d = document.createElement("input");
17 d.setAttribute("type", "button")
18 d.setAttribute("onclick", "deteFile(this)");
19 d.setAttribute("value", "Delete")
20 div.appendChild(d)
21 document.getElementById("_container").appendChild(div);
22 }
23
24 function deteFile(object) {
25 while (object.tagName != "DIV") object = object.parentNode;
26 object.parentNode.removeChild(object);
27 }
28 </script>
29
30 </head>
31 <body>
32 <form id="form1" runat="server" method="post" enctype="multipart/form-data">
33 <h3>
34 Multiple File Upload</h3>
35 UserName：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
36 <div id="_container">
37 <input type="file" size="50" name="File" runat="server" />
38 </div>
39 <div>
40 <input type="button" value="Add File" onclick="addFile()" runat="server" />
41 </div>
42 <div style="padding: 10px 0">
43 <asp:Button runat="server" Text="Upload" ID="btnUpload" OnClick="btnUpload_Click">
44 </asp:Button>
45 </div>
46 <div>
47 <asp:Label ID="strStatus" runat="server" Font-Names="宋体" Font-Bold="True" Font-Size="9pt"
48 Width="500px" BorderStyle="None" BorderColor="White"></asp:Label>
49 </div>
50 </form>
51 </body>
52 </html>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title>Untitled Page</title>
7
8 <script type="text/javascript" language="javascript">
9 function addFile() {
10 var div = document.createElement("div");
11 var f = document.createElement("input");
12 f.setAttribute("type", "file")
13 f.setAttribute("name", "File")
14 f.setAttribute("size", "50")
15 div.appendChild(f)
16 var d = document.createElement("input");
17 d.setAttribute("type", "button")
18 d.setAttribute("onclick", "deteFile(this)");
19 d.setAttribute("value", "Delete")
20 div.appendChild(d)
21 document.getElementById("_container").appendChild(div);
22 }
23
24 function deteFile(object) {
25 while (object.tagName != "DIV") object = object.parentNode;
26 object.parentNode.removeChild(object);
27 }
28 </script>
29
30 </head>
31 <body>
32 <form id="form1" runat="server" method="post" enctype="multipart/form-data">
33 <h3>
34 Multiple File Upload</h3>
35 UserName：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
36 <div id="_container">
37 <input type="file" size="50" name="File" runat="server" />
38 </div>
39 <div>
40 <input type="button" value="Add File" onclick="addFile()" runat="server" />
41 </div>
42 <div style="padding: 10px 0">
43 <asp:Button runat="server" Text="Upload" ID="btnUpload" OnClick="btnUpload_Click">
44 </asp:Button>
45 </div>
46 <div>
47 <asp:Label ID="strStatus" runat="server" Font-Names="宋体" Font-Bold="True" Font-Size="9pt"
48 Width="500px" BorderStyle="None" BorderColor="White"></asp:Label>
49 </div>
50 </form>
51 </body>
52 </html>
注意：前台<input>控件，需要添加<runat="server">才能在后台获取到。
后台c#代码：
View Code
1 protected void btnUpload_Click(object sender, EventArgs e)
2 {
3 ///'遍历File表单元素
4 HttpFileCollection files = HttpContext.Current.Request.Files;
5
6 /// '状态信息
7 System.Text.StringBuilder strMsg = new System.Text.StringBuilder("您输入的用户名是：" + TextBox1.Text + "<br/>");
8 strMsg.Append("上传的文件分别是：<hr color='red'/>");
9 try
10 {
11 for (int iFile = 0; iFile < files.Count; iFile++)
12 {
13 ///'检查文件扩展名字
14 HttpPostedFile postedFile = files[iFile];
15 string fileName, fileExtension;
16 fileName = System.IO.Path.GetFileName(postedFile.FileName);
17 if (fileName != "")
18 {
19 fileExtension = System.IO.Path.GetExtension(fileName);
20 strMsg.Append("上传的文件类型：" + postedFile.ContentType.ToString() + "<br>");
21 strMsg.Append("客户端文件地址：" + postedFile.FileName + "<br>");
22 strMsg.Append("上传文件的文件名：" + fileName + "<br>");
23 strMsg.Append("上传文件的扩展名：" + fileExtension + "<br><hr>");
24 ///'可根据扩展名字的不同保存到不同的文件夹
25 ///注意：可能要修改你的文件夹的匿名写入权限。
2 {
3 ///'遍历File表单元素
4 HttpFileCollection files = HttpContext.Current.Request.Files;
5
6 /// '状态信息
7 System.Text.StringBuilder strMsg = new System.Text.StringBuilder("您输入的用户名是：" + TextBox1.Text + "<br/>");
8 strMsg.Append("上传的文件分别是：<hr color='red'/>");
9 try
10 {
11 for (int iFile = 0; iFile < files.Count; iFile++)
12 {
13 ///'检查文件扩展名字
14 HttpPostedFile postedFile = files[iFile];
15 string fileName, fileExtension;
16 fileName = System.IO.Path.GetFileName(postedFile.FileName);
17 if (fileName != "")
18 {
19 fileExtension = System.IO.Path.GetExtension(fileName);
20 strMsg.Append("上传的文件类型：" + postedFile.ContentType.ToString() + "<br>");
21 strMsg.Append("客户端文件地址：" + postedFile.FileName + "<br>");
22 strMsg.Append("上传文件的文件名：" + fileName + "<br>");
23 strMsg.Append("上传文件的扩展名：" + fileExtension + "<br><hr>");
24 ///'可根据扩展名字的不同保存到不同的文件夹
25 ///注意：可能要修改你的文件夹的匿名写入权限。
//保存的路径，用相对路径
26 postedFile.SaveAs(System.Web.HttpContext.Current.Request.MapPath("images/") + fileName);
27 }
28 }
29 strStatus.Text = strMsg.ToString();
30 }
31 catch (System.Exception Ex)
32 {
33 strStatus.Text = Ex.Message;
34 }
35
36 }
26 postedFile.SaveAs(System.Web.HttpContext.Current.Request.MapPath("images/") + fileName);
27 }
28 }
29 strStatus.Text = strMsg.ToString();
30 }
31 catch (System.Exception Ex)
32 {
33 strStatus.Text = Ex.Message;
34 }
35
36 }
知识点：
1. 前台代码想要在后台取得，用runat="server"
2. js多文件上传
3. 上传文件用相对路径，在该Solutions下保证，已新建images文件夹。或者添加代码判断没有该文件夹存在时候，自动新建。
4. 取得上传文件的后缀名的方法
Be the change you want to see in the world.
