asp.net 多张图片上传
先看界面
url界面设计
运行效果
图片预览效果
code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm12.aspx.cs" Inherits="jquerytest.test1.WebForm12" %>
<!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>
<link rel="shortcut icon" href="http://www.zhangxinxu.com/zxx_ico.png" />
<link rel="stylesheet" href="../css/common.css" type="text/css" />
<link rel="stylesheet" href="../css/boxy.css" type="text/css" />
<script src="../jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/jquery.boxy.js"></script>
<script type="text/javascript">
$(function() {
$(".boxy").boxy();
});
</script>
<style type="text/css">
.zxx_test_list p{padding:7px 0 3px; font-size:0.95em;}
.zxx_test_list p strong,.f8{font-size:0.9em;}
.zxx_ul_circle{padding-left:20px; padding-bottom:10px;}
.zxx_ul_circle li{list-style-type:disc; list-style-position:outside; padding-top:5px; font-size:0.9em;}
#form{display:inline; margin:0 0 0 20px; padding:0;}
.zxx_ul_table{display:inline-block; *display:inline; border:1px solid #828da1; margin-top:-1px; font-size:0.9em; overflow:hidden; zoom:1;}
.zxx_ul_table li{padding:2px 5px 2px 10px; float:left;}
.zxx_ul_table.title li{background:#CBE0FF;}
.zxx_ul_table .w1{width:90px;}
.zxx_ul_table .w2{width:250px; border-left:1px solid #828da1; border-right:1px solid #828da1;}
.zxx_ul_table .w3{width:120px;}
.font{font-style:italic;}
.zxx_left_menu{position:fixed!important; position:absolute; left:3px; top:80px; width:13%; padding:10px 6px; background:white; border-bottom:1px solid #cccccc; border-right:1px solid #cccccc;}
.zxx_left_menu li{border-bottom:1px dashed #cccccc; font-size:12.9px;}
.zxx_left_menu li a{display:block; padding:6px 0 4px 5px; text-decoration:none;}
.zxx_left_menu li a:hover{background:#eeeeee; color:#34538b;}
</style>
</head>
<body>
<center>
<h2>
</h2>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Style="font-weight: bold; font-size: x-large"
Text="文件上传操作示例"></asp:Label>
</div>
<table border="1" style="width: 676px; height: 197px">
<tr>
<td colspan="3">
<asp:FileUpload ID="FileUpload1" runat="server" Width="404px" Height="29px" /></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<asp:Label ID="lblResult" runat="server" ForeColor="Red"></asp:Label></td>
</tr>
<tr>
</tr>
<tr>
<td colspan="2" rowspan="1" style="width: 2503px; height: 25px;" align="center">
<asp:Button ID="btnAdd" runat="server" Text="增 加" OnClick="btnAdd_Click" />
</td>
<td><asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="上 传" /></td>
</tr>
<tr>
<td align="center" colspan="3" rowspan="1">
<asp:CheckBox ID="CheckBox1" runat="server" Text="上传后清空上传文件列表" AutoPostBack="True" /></td>
</tr>
<tr>
<td colspan="3">
<asp:DataList ID="DataList1" runat="server" CellPadding="3" Height="1px"
Width="615px" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None"
BorderWidth="1px" GridLines="Horizontal"
ondeletecommand="DataList1_DeleteCommand">
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<SelectedItemStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
<AlternatingItemStyle BackColor="#F7F7F7" />
<ItemStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
<ItemTemplate>
<table style="width: 450px; height: 54px" border="1" >
<tr>
<td>
图片预览：
</td>
<td style="width: 200px">
<a href="#" onclick="window.open('WebForm18.aspx?imgs=<%#Eval("imgName")%>');">xxxxx</a>
</td>
<td rowspan="4">
<asp:Button ID="Delete" Runat="server" Text="Delete" CommandName="delete" CommandArgument='<%#Eval("imgName")%>' />
</td>
</tr>
<tr>
<td>
文件名称：
</td>
<td style="width: 200px">
<%#Eval("imgName")%>
</td>
</tr>
<tr>
<td>
文件大小：
</td>
<td style="width: 200px">
<%#Eval("imgSize")%>字节
</td>
</tr>
<tr>
<td style="height: 20px">
文件类型：
</td>
<td style="width: 200px; height: 20px;">
<%#Eval("imgType")%>
</td>
</tr>
</table>
</ItemTemplate>
<HeaderTemplate>
上传文件列表
</HeaderTemplate>
</asp:DataList>
</td>
</tr>
</table>
<div id="foobar" style="padding:15px; display:none; background-color:#cad5eb; font-size:2em; color:#000000; font-weight:bold;">这是一段ID为foobar的div标签内的文字</div>
</form>
</center>
</body>
</html>
<%-- <p>1.<a href="#foobar" title="展现href锚点对应ID内容" class="boxy">锚点#对应ID的内容(div#foobar)</a></p>--%>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
using System.Data;
using System.IO;
namespace jquerytest.test1
{
public partial class WebForm12 : System.Web.UI.Page
{
//public DataTable dtImages = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
}
/// <summary>
/// 增加按钮
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void btnAdd_Click(object sender, EventArgs e)
{
DataTable dtImages = new DataTable();
string filename = FileUpload1.PostedFile.FileName;
if (DataList1.Items.Count > 4)
{//item下标从0开始，最多只能添加5条数据
ShowMsg("只能添加5条数据");
return;
}
//检查是否有文件要上传
if (this.FileUpload1.HasFile)
{
filename = FileUpload1.FileName;
string extension = System.IO.Path.GetExtension(filename).ToLower();//获得后缀名
if (this.FileUpload1.PostedFile.ContentLength > 4096000)
{
ShowMsg("文件不能超过4M!");
return;
}
if (extension == ".jpg" || extension == ".png")
{
DateTime dt = DateTime.Now;
string truefilename = string.Format("{0:yyyyMMddHHmmssffff}", dt) + extension;
if (Session["UPLOAD"] == null)
{
dtImages.Columns.Add("imgName", typeof(string));
dtImages.Columns.Add("imgSize", typeof(string));
dtImages.Columns.Add("imgType", typeof(string));
dtImages.Columns.Add("imgUrl", typeof(object));
dtImages.Rows.Add(new object[] { truefilename, this.FileUpload1.PostedFile.ContentLength, this.FileUpload1.PostedFile.ContentType,this.FileUpload1.PostedFile });
Session["UPLOAD"] = dtImages;
}
else
{
dtImages = Session["UPLOAD"] as DataTable;
dtImages.Rows.Add(new object[] { truefilename, this.FileUpload1.PostedFile.ContentLength, this.FileUpload1.PostedFile.ContentType,this.FileUpload1.PostedFile });
Session["UPLOAD"] = dtImages;
}
}
else
{
ShowMsg("请上传jpg或png的图片格式!");
}
}
else
{
lblResult.Text = "请选择上传文件!";
}
DataList1.DataSource = Session["UPLOAD"];
DataList1.DataBind();
}
/// <summary>
/// 上传按钮
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param> n,
protected void btnUpload_Click(object sender, EventArgs e)
{
string strPath = Server.MapPath("~/files/");
if (Session["UPLOAD"] != null)
{
//从DataTable中取出要上传的文件
DataTable dtUpload = Session["UPLOAD"] as DataTable;
for (int i = 0; i < dtUpload.Rows.Count; i++)
{
HttpPostedFile PostedFile = dtUpload.Rows[i]["imgUrl"] as HttpPostedFile;
//将文件上传到指定路径
PostedFile.SaveAs(strPath + System.IO.Path.GetFileName(dtUpload.Rows[i]["imgName"].ToString()));
}
lblResult.Text = "上传成功!";
}
//上传后清空上传文件列表
if (CheckBox1.Checked)
{
Session["UPLOAD"] = null;
DataList1.DataSource = Session["UPLOAD"];
DataList1.DataBind();
}
}
#region 消息提示
/// <summary>
/// 消息提示
/// </summary>
/// <param name="strMsg">消息</param>
public void ShowMsg(string strMsg)
{
string script = "<script>setTimeout(function(){ alert('" + strMsg + "');},1000)</script>";
this.Page.ClientScript.RegisterStartupScript(this.GetType(), Guid.NewGuid().ToString(), script);
}
/// <summary>
/// 消息提示(跳转页面)
/// </summary>
/// <param name="strMsg">消息</param>
/// <param name="jumpNum">跳转参数</param>
public void ShowMsg(string strMsg, string page, int jumpNum)
{
string script = "";
if (jumpNum == 0)
script = "<script>setTimeout(function(){ alert('" + strMsg + "');window.location.href='" + page + "';},1000)</script>";
else
script = "<script>setTimeout(function(){ alert('" + strMsg + "');parent.window.location='" + page + "';parent.closeEditor();},1000)</script>";
this.Page.ClientScript.RegisterStartupScript(this.GetType(), Guid.NewGuid().ToString(), script);
}
#endregion
protected void DataList1_DeleteCommand(object source, DataListCommandEventArgs e)
{
//int id = (int)DataList1.DataKeys[e.Item.ItemIndex];
string strPath = Server.MapPath("~/files/");
if (e.CommandName == "delete")
{
DataTable tb = Session["UPLOAD"] as DataTable;
DataRow[] row = tb.Select("imgName='" + e.CommandArgument + "'");
row[0].Delete();
Session["UPLOAD"] = tb;
DataList1.DataSource = tb;
DataList1.DataBind();
DelFiles(strPath + e.CommandArgument);
}
}
//删除文件
public void DelFiles(string path)
{
if (File.Exists(path))
{
File.Delete(path);
}
}
}
}
多张图片上传会引发
无法访问已关闭的文件 异常 为什么会出现这个
由于图片文件大小 太大，上传到服务器要消耗时间，大图片没上传好另一张 图片又开始上传了。
你会发现 异常出现的地方 图片上传到服务器 是 0kb的.
怎么解决这个问题。
1，可以在web.config配置上传限制 代码。
这个配置 也只能解决 部分问题。
<
httpRuntime
executionTimeout
="90"
maxRequestLength
="2097151"
useFullyQualifiedRedirectUrl
="false"
requestLengthDiskThreshold
="8192"
/>
2，引用system.Thread 类 设置 线程休眠时间 缓解压力 Tread.sleep(2000), 最好是计算图片大小 算出要给图片上传多少休眠时间。