本篇介绍上传图片保存到文件，并将其绑定到gridview显示出来。首先在选择上传图片时可以同时对该选择的图片预览，当确定上传后将文件保存到文件。
这里涉及到几个知识点
1，如何在选择图片是编写js实现对选择图片的预览功能
2，介绍如何上传图片并动态创建存储图片的文件夹
3，保存图片时判断图片是否已经存在及保存图片的方式
4，介绍如何获取指定文件夹下的所有的文件，然后动态生成并将其绑定到Datatable，最后再绑定gridview
5，本例子还用到了prototype.js，仅仅是获取一个组件。
效果图
html页面源代码
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpImage.aspx.cs" Inherits="StudyVSNet.Sample.UpImage" %>
<!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" src="../prototype.js"></script>
<script type="text/javascript">
function fn_yulan()
{
var imgID = $("imgID");
var yulan = $("yulan");
yulan.src = imgID.value;
}
</script>
</head>
<body style="text-align:center; ">
<form id="form1" runat="server">
<div style="background-color:Purple; width:600px;">
<input type="file" id="imgID" runat="server" title="上传图片" onchange="javascript:fn_yulan()"/>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="开始上传" />
<br />
<img id="yulan" alt="" src="" />
</div>
<asp:GridView ID="GridView1" Width="600" runat="server" AllowPaging="true"
AllowSorting="true" AutoGenerateColumns="false"
onpageindexchanging="GridView1_PageIndexChanging"
onsorting="GridView1_Sorting">
<AlternatingRowStyle BackColor="#cc9900" />
<HeaderStyle BackColor="#666699" BorderColor="#009933" BorderWidth="2px" Font-Bold="true" />
<RowStyle BackColor="#6600ff" />
<Columns>
<asp:BoundField DataField="编号" HeaderText="编号" SortExpression="编号" />
<asp:BoundField DataField="文件名称" HeaderText="文件名称" SortExpression="文件名称" />
<asp:TemplateField HeaderText="查看">
<ItemTemplate>
<img src='../<%# Eval("文件名称") %>' alt="" width="475" height="275" style="display:none;" />
<a href="../imgUp/<%# Eval("文件名称") %>" target="_blank" >查看图片</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>
</body>
</html>
页面后台代码
public partial class UpImage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Bind_Grid();
}
}
protected void Button1_Click(object sender, EventArgs e)
{
try
{
HttpPostedFile post = Request.Files[0];
if (post != null && post.ContentLength > 0)
{
string name = post.FileName.Substring(post.FileName.LastIndexOf("\\") + 1);
string folderName = Server.MapPath(Request.ApplicationPath + "/imgUp");
if (!Directory.Exists(folderName))
{
Directory.CreateDirectory(folderName);
}
string pathName = Server.MapPath(Request.ApplicationPath + "/imgUp/" + name);
if (File.Exists(pathName))
{
Response.Write("<script>alert('文件名称已经存在!');</script>");
return;
}
post.SaveAs(pathName);
Bind_Grid();
Response.Write("<script for=window event=onload>alert('上传成功!');</script>");
}
}
catch (Exception ee)
{
string error = ee.Message;
}
}
void Bind_Grid()
{
string pathName = Server.MapPath(Request.ApplicationPath + "/imgUp");
String[] files = Directory.GetFiles(pathName);
if (files.Length > 0)
{
DataTable dt = new DataTable();
dt.Columns.Add("编号");
dt.Columns.Add("文件名称");
int i = 0;
foreach (string file in files)
{
DataRow row = dt.NewRow();
row["编号"] = ++i;
row["文件名称"] = file.Substring(file.LastIndexOf("\\") + 1);//"imgUp/" +
dt.Rows.Add(row);
}
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
Bind_Grid();
}
protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
{
}
}
