在做asp.net的Web開發的時候，我們經常會遇到一次性上傳多個檔案的需求。通常我們的解決方案是固定放多個上傳檔案框，這樣的解決辦法顯然是不合理的，因為一次上傳多個，就意味著數量不確定。因此我們就要讓這些檔案上傳框動態添加，下面我以我做的一個圖庫管理中的上傳圖片的功能為例
先看效果：
開啟的初始介面：
預設是上傳一個圖片，但當我們點“增加圖片”按鈕時可以實現選擇多個圖片及其描述同時上傳，本功能限制一次最多隻能上傳8張，且每張圖片大小不超過1M，這個大家可根據實際情況更改！
下面來看實現過程：
第一步，使用javascript代碼實現動態添加檔案上傳框和描述文字框，關鍵代碼如下：
<script type="text/javascript">
var i=1
function addFile()
...{
if (i<8)
...{var str = '<BR> <input type="file" name="File" runat="server" style="width: 300px"/>描述：<input name="text" type="text" style="width: 150px" maxlength="20" />'
document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str)
}
else
...{
alert("您一次最多隻能上傳8張圖片！")
}
i++
}
</script>HTML調用代碼為：
<P id="MyFile"><INPUT onclick="addFile()" type="button" value="增加圖片(Add)"><br />
<input type="file" name="File" runat="server" style="width: 300px"/>
描述：<input name="text" type="text" style="width: 150px" maxlength="20" />
第二步：伺服器端代碼實現
就上傳單個檔案或圖片來說，使最普通不過的了，但是對於這樣的一次性上傳多個檔案以及它們相應的描述的問題，就要費點周折
首先，通過System.Web.HttpContext.Current.Request.Files方法擷取用戶端的檔案集合，然後通過Request.Form方法獲得描述文字框集合，最後利用一個迴圈將檔案上傳，並將相應的資訊儲存到資料庫
關鍵代碼如下：
System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
string[] rd = Request.Form[1].Split(',');//獲得圖片描述的文字框字串數組，為對應的圖片的描述
string albumid=ddlAlbum.SelectedValue.Trim();
int ifile;
for (ifile = 0; ifile < files.Count; ifile++)
...{
if (files[ifile].FileName.Length > 0)
...{
.......................... //上傳單個檔案並儲存相關資訊
}
}
最後給出上述功能的全部代碼:
HTML代碼:
<%...@ Page Language="C#" CodeFile="UploadImg.aspx.cs" Inherits="NetAdmin_APicture_UploadImg" %>
<!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 type="text/javascript">...
var i=1
function addFile()
...{
if (i<8)
...{var str = '<BR> <input type="file" name="File" runat="server" style="width: 300px"/>描述：<input name="text" type="text" style="width: 150px" maxlength="20" />'
document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str)
}
else
...{
alert("您一次最多隻能上傳8張圖片！")
}
i++
}
</script>
<link href="http://www.cnblogs.com/NetAdmin/Site.Css" rel="stylesheet" type="text/css" />
</head>
<body style="background-image: url(../images/bg.jpg); text-align: center">
<form id="form1" runat="server">
<div>
<table id="Table1" align="center" border="0" cellpadding="1" cellspacing="1" class="table"
style="height: 58px" width="620">
<tr>
<td align="center" background="../images/topbg1.jpg">
<font color="#0000ff" face="宋體" size="3"><strong>上傳圖片</strong></font></td>
</tr>
<tr>
<td align="center">
</td>
</tr>
<tr>
<td align="center">
<asp:Panel ID="Panel5" runat="server" Width="608px">
<table width="100%">
<tr>
<td align="right" style="width: 100px">
</td>
<td align="left">
說明：點增加圖片按鈕可一次上傳多張圖片，可為每張圖片寫上一句不超過20個字的描述。單張圖片大小不大於1024k</td>
</tr>
<tr>
<td align="right" style="width: 100px">
請選擇圖片：<br />
</td>
<td align="left"><P id="MyFile"><INPUT onclick="addFile()" type="button" value="增加圖片(Add)"><br />
<input type="file" name="File" runat="server" style="width: 300px"/>
描述：<input name="text" type="text" style="width: 150px" maxlength="20" />
</td>
</tr>
<tr>
<td align="right" style="width: 100px">
上傳到的圖庫：</td>
<td align="left">
<asp:DropDownList ID="ddlAlbum" runat="server" DataSourceID="SqlDataSource1"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
