在做asp.net的Web开发的时候,我们经常会遇到一次性上传多个文件的需求。通常我们的解决方法是固定放多个上传文件框,这样的解决办法显然是不合理的,因为一次上传多个,就意味着数量不确定。因此我们就要让这些文件上传框动态添加,下面我以我做的一个图库管理中的上传图片的功能为例
先看效果:
打开的初始界面:
![ASP.NET(C#)实现一次性动态上传多张图片的代码(多个文件)](/UploadFiles/2021-04-02/20111012223010855.jpg)
默认是上传一个图片,但当我们点“增加图片”按钮时可以实现选择多个图片及其描述同时上传,本功能限制一次最多只能上传8张,且每张图片大小不超过1M,这个大家可根据实际情况更改!
如图:
![ASP.NET(C#)实现一次性动态上传多张图片的代码(多个文件)](/upload/201110/20111012223011789.jpg)
下面来看实现过程:
第一步,使用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"
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(',');//获得图片描述的文本框字符串数组,为对应的图片的描述
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)//说明图片大小和格式都没问题
...{
//以下为创建图库目录
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();//产生一个随机数用于新命名的图片
string NewName =DateTime.Now.Minute.ToString() + DateTime.Now.Second.ToString()+DateTime.Now.Millisecond.ToString()+stro;
if (FileName.Length > 0)//有文件才执行上传操作再保存到数据库
...{
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);//将图片信息保存到数据库
if (name == 1)//如果为每次更新的第一张图片,则将它更新为象册的封面
...{
upFirstimg(albumid, PicPath);
}
name = name + 1;//用来重命名规则的变量
}
}
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#)实现一次性动态上传多张图片的代码(多个文件)](/UploadFiles/2021-04-02/20111012223010855.jpg)
默认是上传一个图片,但当我们点“增加图片”按钮时可以实现选择多个图片及其描述同时上传,本功能限制一次最多只能上传8张,且每张图片大小不超过1M,这个大家可根据实际情况更改!
如图:
![ASP.NET(C#)实现一次性动态上传多张图片的代码(多个文件)](/upload/201110/20111012223011789.jpg)
下面来看实现过程:
第一步,使用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"
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(',');//获得图片描述的文本框字符串数组,为对应的图片的描述
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)//说明图片大小和格式都没问题
...{
//以下为创建图库目录
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();//产生一个随机数用于新命名的图片
string NewName =DateTime.Now.Minute.ToString() + DateTime.Now.Second.ToString()+DateTime.Now.Millisecond.ToString()+stro;
if (FileName.Length > 0)//有文件才执行上传操作再保存到数据库
...{
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);//将图片信息保存到数据库
if (name == 1)//如果为每次更新的第一张图片,则将它更新为象册的封面
...{
upFirstimg(albumid, PicPath);
}
name = name + 1;//用来重命名规则的变量
}
}
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);
}
}
标签:
动态上传,多张图片
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“ASP.NET(C#)实现一次性动态上传多张图片的代码(多个文件)”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新动态
20240901
20240901
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- [音展纪念碟]2006年《TAA台湾第十六届国际HI-ENDHI-FI音响展》2cd[WAV]
- 中国音乐地图之听见西藏山歌牧歌酒歌2020[WAV分轨]
- 王宏伟2017-永远的红飘带[太平洋影音][WAV+CUE]
- 费翔.1997-NOW现在【第一中国】【WAV+CUE】
- 新格合唱团.1981-我唱你和2辑(滚石新格民歌系列)【新格】【WAV+CUE】
- 陈柏宇.2011-QUINQUENNIUM【SONY】【WAV+CUE】
- 雨果唱片-《金唛系列-蔷薇依韵琼瑶》WAV
- 陈百强《凝望(2012华纳LPCD45限量版)[DMI]》[WAV整轨]
- 模拟之声慢刻CD《徐小凤45周年》[德国母带][低速原抓WAV+CUE]
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- 《王菲 单曲合集》[FlAC/分轨][520MB]
- 《费玉清 原味再现 水长流》[WAV+CUE][430MB]
- 群星.1992-畅销榜老歌金曲10CD【风格】【WAV+CUE】
- 孙悦.2024-时光音乐会【金蜂】【WAV+CUE】