ASP.NET(C#)實現(xiàn)一次性動態(tài)上傳多張圖片的代碼（多個文件）
更新時間：2011年10月12日 22:30:36 作者：
我們就要讓這些文件上傳框動態(tài)添加，下面我以我做的一個圖庫管理中的上傳圖片的功能為例
在做asp.net的Web開發(fā)的時候，我們經(jīng)常會遇到一次性上傳多個文件的需求。通常我們的解決方法是固定放多個上傳文件框，這樣的解決辦法顯然是不合理的，因為一次上傳多個，就意味著數(shù)量不確定。因此我們就要讓這些文件上傳框動態(tài)添加，下面我以我做的一個圖庫管理中的上傳圖片的功能為例
先看效果：
打開的初始界面：
默認是上傳一個圖片，但當我們點“增加圖片”按鈕時可以實現(xiàn)選擇多個圖片及其描述同時上傳，本功能限制一次最多只能上傳8張，且每張圖片大小不超過1M，這個大家可根據(jù)實際情況更改！
如圖：
下面來看實現(xiàn)過程：
第一步，使用javascript代碼實現(xiàn)動態(tài)添加文件上傳框和描述文本框，關鍵代碼如下：
<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" />
第二步：服務器端代碼實現(xiàn)
就上傳單個文件或圖片來說，使最普通不過的了，但是對于這樣的一次性上傳多個文件以及它們相應的描述的問題，就要費點周折
首先，通過System.Web.HttpContext.Current.Request.Files方法獲取客戶端的文件集合，然后通過Request.Form方法獲得描述文本框集合，最后利用一個循環(huán)將文件上傳，并將相應的信息保存到數(shù)據(jù)庫
關鍵代碼如下：
System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
string[] rd = Request.Form[1].Split(',');//獲得圖片描述的文本框字符串數(shù)組，為對應的圖片的描述
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 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"
DataTextField="AlbumName" DataValueField="AlbumID">
</asp:DropDownList><asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:WebJakeCS %>"
SelectCommand="SELECT [AlbumID], [AlbumName] FROM [WB_Album] ORDER BY [AlbumID] DESC">
</asp:SqlDataSource>
</td>
</tr>
<tr>
<td align="right" style="width: 100px">
</td>
<td align="left">
<asp:Button ID="btnUpload" runat="server" Text="開始上傳" OnClick="btnUpload_Click" />
</td>
</tr>
<tr>
<td align="right" style="width: 100px">
</td>
<td align="left">
<asp:Label ID="lblMessage" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label></td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td align="center">
<font face="宋體"></font><font face="宋體"> </font>
</td>
</tr>
<tr>
<td align="center">
<font face="宋體"></font>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
后臺代碼:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;
public partial class NetAdmin_APicture_UploadImg : System.Web.UI.Page
...{
protected void Page_Load(object sender, EventArgs e)
...{
}
protected void btnUpload_Click(object sender, EventArgs e)
...{
lblMessage.Text = "";
lblMessage.Visible = false;
System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
System.Text.StringBuilder strmsg = new System.Text.StringBuilder("");
string[] rd = Request.Form[1].Split(',');//獲得圖片描述的文本框字符串數(shù)組，為對應的圖片的描述
string albumid=ddlAlbum.SelectedValue.Trim();
int ifile;
for (ifile = 0; ifile < files.Count; ifile++)
...{
if (files[ifile].FileName.Length > 0)
...{
System.Web.HttpPostedFile postedfile = files[ifile];
if (postedfile.ContentLength / 1024 > 1024)//單個文件不能大于1024k
...{
strmsg.Append(Path.GetFileName(postedfile.FileName) + "---不能大于1024k<br>");
break;
}
string fex = Path.GetExtension(postedfile.FileName);
if (fex != ".jpg" && fex != ".JPG" && fex != ".gif" && fex != ".GIF")
...{
strmsg.Append(Path.GetFileName(postedfile.FileName) + "---圖片格式不對，只能是jpg或gif<br>");
break;
}
}
}
if (strmsg.Length <= 0)//說明圖片大小和格式都沒問題
...{
//以下為創(chuàng)建圖庫目錄
string dirname = "pic00" + ddlAlbum.SelectedValue.Trim();
string dirpath = Server.MapPath("http://www.cnblogs.com/PicBase");
dirpath = dirpath + "\" + dirname;
if (Directory.Exists(dirpath) == false)
...{
Directory.CreateDirectory(dirpath);
}
Random ro = new Random();
int name = 1;
for (int i = 0; i < files.Count; i++)
...{
System.Web.HttpPostedFile myFile = files[i];
string FileName = "";
string FileExtention = "";
string PicPath = "";
FileName = System.IO.Path.GetFileName(myFile.FileName);
string stro=ro.Next(100,100000000).ToString()+name.ToString();//產(chǎn)生一個隨機數(shù)用于新命名的圖片
string NewName =DateTime.Now.Minute.ToString() + DateTime.Now.Second.ToString()+DateTime.Now.Millisecond.ToString()+stro;
if (FileName.Length > 0)//有文件才執(zhí)行上傳操作再保存到數(shù)據(jù)庫
...{
FileExtention = System.IO.Path.GetExtension(myFile.FileName);
string ppath = dirpath + "\" + NewName + FileExtention;
myFile.SaveAs(ppath);
string FJname = FileName;
PicPath = "PicBase" + "\" + dirname + "\" + NewName + FileExtention;
}
AddPicture(PicPath, rd[i], albumid);//將圖片信息保存到數(shù)據(jù)庫
if (name == 1)//如果為每次更新的第一張圖片，則將它更新為象冊的封面
...{
upFirstimg(albumid, PicPath);
}
name = name + 1;//用來重命名規(guī)則的變量
}
}
else
...{
lblMessage.Text = strmsg.ToString();
lblMessage.Visible = true;
}
}
private void AddPicture(string imgpath,string imgnote,string albumid)
...{
string sql = "insert WB_AlbumImges(ImgPath,ImgNote,AlbumID) values('"+imgpath+"','"+imgnote+"','"+albumid+"')";
DB mydb = new DB();
mydb.RunProc(sql);
}
private void upFirstimg(string albumid,string firstimg)
...{
string sql = "update WB_Album set FirstImg='"+firstimg+"' where AlbumID="+albumid;
DB mydb = new DB();
mydb.RunProc(sql);
}
}
先看效果：
打開的初始界面：
默認是上傳一個圖片，但當我們點“增加圖片”按鈕時可以實現(xiàn)選擇多個圖片及其描述同時上傳，本功能限制一次最多只能上傳8張，且每張圖片大小不超過1M，這個大家可根據(jù)實際情況更改！
如圖：
下面來看實現(xiàn)過程：
第一步，使用javascript代碼實現(xiàn)動態(tài)添加文件上傳框和描述文本框，關鍵代碼如下：
復制代碼 代碼如下:
<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" />
第二步：服務器端代碼實現(xiàn)
就上傳單個文件或圖片來說，使最普通不過的了，但是對于這樣的一次性上傳多個文件以及它們相應的描述的問題，就要費點周折
首先，通過System.Web.HttpContext.Current.Request.Files方法獲取客戶端的文件集合，然后通過Request.Form方法獲得描述文本框集合，最后利用一個循環(huán)將文件上傳，并將相應的信息保存到數(shù)據(jù)庫
關鍵代碼如下：
復制代碼 代碼如下:
System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
string[] rd = Request.Form[1].Split(',');//獲得圖片描述的文本框字符串數(shù)組，為對應的圖片的描述
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 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"
DataTextField="AlbumName" DataValueField="AlbumID">
</asp:DropDownList><asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:WebJakeCS %>"
SelectCommand="SELECT [AlbumID], [AlbumName] FROM [WB_Album] ORDER BY [AlbumID] DESC">
</asp:SqlDataSource>
</td>
</tr>
<tr>
<td align="right" style="width: 100px">
</td>
<td align="left">
<asp:Button ID="btnUpload" runat="server" Text="開始上傳" OnClick="btnUpload_Click" />
</td>
</tr>
<tr>
<td align="right" style="width: 100px">
</td>
<td align="left">
<asp:Label ID="lblMessage" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label></td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td align="center">
<font face="宋體"></font><font face="宋體"> </font>
</td>
</tr>
<tr>
<td align="center">
<font face="宋體"></font>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
后臺代碼:
復制代碼 代碼如下:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;
public partial class NetAdmin_APicture_UploadImg : System.Web.UI.Page
...{
protected void Page_Load(object sender, EventArgs e)
...{
}
protected void btnUpload_Click(object sender, EventArgs e)
...{
lblMessage.Text = "";
lblMessage.Visible = false;
System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
System.Text.StringBuilder strmsg = new System.Text.StringBuilder("");
string[] rd = Request.Form[1].Split(',');//獲得圖片描述的文本框字符串數(shù)組，為對應的圖片的描述
string albumid=ddlAlbum.SelectedValue.Trim();
int ifile;
for (ifile = 0; ifile < files.Count; ifile++)
...{
if (files[ifile].FileName.Length > 0)
...{
System.Web.HttpPostedFile postedfile = files[ifile];
if (postedfile.ContentLength / 1024 > 1024)//單個文件不能大于1024k
...{
strmsg.Append(Path.GetFileName(postedfile.FileName) + "---不能大于1024k<br>");
break;
}
string fex = Path.GetExtension(postedfile.FileName);
if (fex != ".jpg" && fex != ".JPG" && fex != ".gif" && fex != ".GIF")
...{
strmsg.Append(Path.GetFileName(postedfile.FileName) + "---圖片格式不對，只能是jpg或gif<br>");
break;
}
}
}
if (strmsg.Length <= 0)//說明圖片大小和格式都沒問題
...{
//以下為創(chuàng)建圖庫目錄
string dirname = "pic00" + ddlAlbum.SelectedValue.Trim();
string dirpath = Server.MapPath("http://www.cnblogs.com/PicBase");
dirpath = dirpath + "\" + dirname;
if (Directory.Exists(dirpath) == false)
...{
Directory.CreateDirectory(dirpath);
}
Random ro = new Random();
int name = 1;
for (int i = 0; i < files.Count; i++)
...{
System.Web.HttpPostedFile myFile = files[i];
string FileName = "";
string FileExtention = "";
string PicPath = "";
FileName = System.IO.Path.GetFileName(myFile.FileName);
string stro=ro.Next(100,100000000).ToString()+name.ToString();//產(chǎn)生一個隨機數(shù)用于新命名的圖片
string NewName =DateTime.Now.Minute.ToString() + DateTime.Now.Second.ToString()+DateTime.Now.Millisecond.ToString()+stro;
if (FileName.Length > 0)//有文件才執(zhí)行上傳操作再保存到數(shù)據(jù)庫
...{
FileExtention = System.IO.Path.GetExtension(myFile.FileName);
string ppath = dirpath + "\" + NewName + FileExtention;
myFile.SaveAs(ppath);
string FJname = FileName;
PicPath = "PicBase" + "\" + dirname + "\" + NewName + FileExtention;
}
AddPicture(PicPath, rd[i], albumid);//將圖片信息保存到數(shù)據(jù)庫
if (name == 1)//如果為每次更新的第一張圖片，則將它更新為象冊的封面
...{
upFirstimg(albumid, PicPath);
}
name = name + 1;//用來重命名規(guī)則的變量
}
}
else
...{
lblMessage.Text = strmsg.ToString();
lblMessage.Visible = true;
}
}
private void AddPicture(string imgpath,string imgnote,string albumid)
...{
string sql = "insert WB_AlbumImges(ImgPath,ImgNote,AlbumID) values('"+imgpath+"','"+imgnote+"','"+albumid+"')";
DB mydb = new DB();
mydb.RunProc(sql);
}
private void upFirstimg(string albumid,string firstimg)
...{
string sql = "update WB_Album set FirstImg='"+firstimg+"' where AlbumID="+albumid;
DB mydb = new DB();
mydb.RunProc(sql);
}
}
您可能感興趣的文章:
- asp.net(C#)使用QRCode生成圖片中心加Logo或圖像的二維碼實例
- Asp.net(C#)讀取數(shù)據(jù)庫并生成JS文件制作首頁圖片切換效果(附demo源碼下載)
- asp.net(c#)實現(xiàn)從sqlserver存取二進制圖片的代碼
- asp.net(C#)壓縮圖片，可以指定圖片模板高寬
- asp.net(c#)獲取內容第一張圖片地址的函數(shù)
- asp.net(c#)判斷遠程圖片是否存在
- C# 將字節(jié)流轉換為圖片的實例方法
- C#識別出圖片里的數(shù)字和字母
- C#圖片按比例縮放的實現(xiàn)代碼
- c#實現(xiàn)圖片二值化例子（黑白效果）
- c#圖片縮放圖片剪切功能實現(xiàn)(等比縮放)
- asp.net(c#)編程實現(xiàn)將彩色圖片變灰階圖片的方法示例
相關文章
ASP.NET Core 集成 React SPA應用的步驟
這篇文章主要介紹了ASP.NET Core 集成 React SPA應用的步驟，幫助大家更好的理解和學習使用.net技術，感興趣的朋友可以了解下2021-04-04
基于ASP.NET Core數(shù)據(jù)保護生成驗證token示例
本篇文章主要介紹了基于ASP.NET Core數(shù)據(jù)保護生成驗證token，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章介紹了.Net?Core實現(xiàn)第三方QQ掃碼登錄的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-02-02
下面小編就為大家分享一篇CefSharp v62修改方法(支持.net4.0)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
JWT（json?web?token），它并不是一個具體的技術實現(xiàn)，而更像是一種標準，這篇文章主要介紹了什么是JWT及一些基本知識,需要的朋友可以參考下2022-12-12
WPF實現(xiàn)文本描邊+外發(fā)光效果的示例代碼
這篇文章主要介紹了如何利用WPF實現(xiàn)文本描邊以及外發(fā)光的效果，文中的示例代碼講解詳細，對我們學習有一定幫助，需要的可以參考一下2022-03-03
ASP.NET:把ashx寫到類庫里并在頁面上調用的具體方法
最近在調整博客的架構，進一步把表現(xiàn)和業(yè)務分離，所以要把之前用ashx搞的那些Http Handler放到類庫中，下面是具體的步驟及代碼2013-06-06
手把手教你AspNetCore WebApi數(shù)據(jù)驗證的實現(xiàn)
這篇文章主要介紹了手把手教你AspNetCore WebApi數(shù)據(jù)驗證的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
asp.net 安全的截取指定長度的html或者ubb字符串
在將html代碼輸出到頁面時，有時候會需要截斷字符串保留指定長度的字符串，由于html中有些標簽必須成對出現(xiàn)，所以在截取html時需要特別注意，不能因為截斷問題把頁面搞亂掉。2010-01-01
在一個網(wǎng)站下再以虛擬目錄的方式掛多個網(wǎng)站的方法
在一個網(wǎng)站下再以虛擬目錄的方式掛N個網(wǎng)站的方法2010-04-04