今天，和大家討論一下在ASP.NET中，如何上傳圖片至資料庫，然後再將圖片讀取顯示的問題。歡迎高手提出自己的方法！！！
目前，我主要用到以下兩種方法：
1：上傳圖片的相對路徑到資料庫中相應欄位裡，讀取顯示時，將控制項（假設用的是Image控制項）的ImageUrl屬性指向該相對路徑即可。
2：將圖片以二進位流的方式整體上傳到資料庫裡，讀取顯示時，以二進位流的方式整體讀出。這種方法稍微麻煩一點，但儲存的是圖片整體到資料庫裡。
第一種方法，實現起來比較簡單，因為存入資料庫裡的只是圖片相對路徑，當然，同時也就有很大的局限性，由於是相對路徑，所以當本地的圖片變換了位置
或移除，或是在其他主機上瀏覽該圖片時，就無法顯示了。第二種方法，就比較靈活了，可以用在互動性的頁面，比如校友錄，因為上傳的是整張圖片，所
以只要讀取正確，就能任何主機上顯示出來。
下面，分別通過實際的代碼，介紹這兩種方法。
在這兩個方法裡，我將用到一個控制項：FileUpload，該控制項的具體用法參見百度Google。。。學習過程中，最好的老師就是他們倆。
1：上傳圖片相對路徑，並讀取顯示。
資料庫裡的欄位很簡單，就兩個
Image_ID int identity(1,1) primarykey not null
Image_Wpath varchar(50) null
Image_Wpath 用來儲存圖片的相對路徑
很簡單的介面(其實是有點醜。。。。)：
這裡注意，我需要上傳的檔案都放在檔案夾“Image”，在後面的上傳路徑裡就需要這個檔案夾。
下面是：
我在輸入框裡填入Image_ID的值，讀取指定的圖片，在圖片的下面，顯示出該圖片的相對路徑。
接下來，我們看一下具體代碼實現上傳和讀取顯示功能。
在項目裡，有一個sqlHelper類，是一些常用的資料存取方法。這裡就不詳細講了。
上傳按鈕裡的事件:
CODE:
protected void Button1_Click(object sender, EventArgs e)顯示按鈕事件：
{
string name = FileUpload1.FileName; //擷取檔案名稱
string type = name.Substring(name.LastIndexOf(".") + 1); //擷取檔案類型
string ipath = Server.MapPath("Image") + "\\" + name; //擷取檔案路徑
string wpath = "Image\\" + name; //[color=red]設定檔案儲存相對路徑(這裡的路徑起始就是我們存放圖片的檔案夾名)[/color]
string query1 = "insert into Images values('" + wpath + "')";
if (type == "jpg" || type == "gif" || type == "bmp" || type == "png")
{
FileUpload1.SaveAs(ipath); //伺服器儲存路徑
sqlHelper.ExecterNonQuery(query1);
}
}
CODE:
protected void Button2_Click(object sender, EventArgs e)2:以二進位流的方式存入資料庫，並讀取顯示。
{
string query2 = "select * from Images where Image_ID=" + Convert.ToInt32(TextBox1.Text);
SqlDataReader sdr = sqlHelper.GetReader(query2);
string wpath2 = "";
while (sdr.Read())
{
wpath2 = sdr[1].ToString(); //獲得相對路徑
}
sdr.Close();
Image1.ImageUrl = wpath2; //圖片顯示路徑就是相對路徑
Label1.Text = wpath2; //顯示相對路徑
}
資料庫的欄位同樣簡單：
Image_ID int identity(1,1) primarykey not null
Image_Content image null
Image_Content以二進位形式儲存圖片
整體看一下例子裡的頁面組成：
上傳圖片頁面和第一種方法一樣，同樣是用到FileUpload，以及一個Button，具體代碼如下：
CODE:
protected void Button1_Click(object sender, EventArgs e)顯示一張圖片和顯示一組圖片有所不同，將會分別說明之。
{
string name = FileUpload1.PostedFile.FileName;
string type = name.Substring(name.LastIndexOf(".") + 1);
FileStream fs = File.OpenRead(name);
byte[] content = new byte[fs.Length];
fs.Read(content, 0, content.Length);
fs.Close();
SqlConnection conn = new SqlConnection("Data Source=;Initial Catalog=;Persist Security Info=True;User ID=;Pooling=False;Password=");
SqlCommand cmd = conn.CreateCommand();
conn.Open();
cmd.CommandText = "insert into Images(Image_Content) values (@content)";
cmd.CommandType = CommandType.Text;
if (type == "jpg" || type == "gif" || type == "bmp" || type == "png")
{
SqlParameter para = cmd.Parameters.Add("@content", SqlDbType.Image);
para.Value = content;
cmd.ExecuteNonQuery();
}
}
顯示一張圖片，要用到Default.aspx和Default2.aspx。Default.aspx中有一個控制項Image，它的屬性ImageUrl指向Default2.aspx用於顯示圖片。Default2.aspx用於
讀取圖片。
Default.aspx.cs
CODE:
protected void Page_Load(object sender, EventArgs e)Default2.aspx.cs
{
Image1.ImageUrl = "Default2.aspx";
}
CODE:
string imgid = Request.QueryString["imgid"];顯示一組圖片時，用ashx Handle存放圖片。同時用GridView以列顯示圖片。Image控制項綁定Image_ID。
SqlConnection conn1 = new SqlConnection("Data Source=;Initial Catalog=;Persist Security Info=True;User ID=sa;Pooling=False;Password=");
SqlCommand cmd1 = new SqlCommand("select Image_Content from Images where Image_ID=3", conn1); //固定顯示Image_ID為3的圖片
conn1.Open();
SqlDataReader sdr = cmd1.ExecuteReader();
if (sdr.Read())
{
Response.BinaryWrite((byte[])sdr["Image_Content"]);
}
Response.End();
allimage.aspx
CODE:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="allimage.aspx.cs" Inherits="allimage" %>allimage.aspx.cs
<!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>BindImg</title>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<FONT face="宋體">
<asp:DataGrid id="MyDataGrid" runat="server" AutoGenerateColumns="False" Width="632px">
<AlternatingItemStyle BackColor="Beige"></AlternatingItemStyle>
<HeaderStyle HorizontalAlign="Center"></HeaderStyle>
<Columns>
<asp:TemplateColumn HeaderText="Photo">
<ItemTemplate> <asp:Image ID="Image1" runat="server" Height="70px" ImageUrl='<%# "Getimg.ashx?id="+Eval("Image_ID") %>'
Width="100px" />
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid></FONT>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:PracticeConnectionString %>"
SelectCommand="SELECT * FROM [Images]"></asp:SqlDataSource>
</form>
</body>
</HTML>
CODE:
protected void Page_Load(object sender, EventArgs e)Getimg.ashx
{
MyDataGrid.DataSource = SqlDataSource1;
MyDataGrid.DataBind();
}
CODE:
<%@ WebHandler Language="C#" Class="Getimg" %>總結：
using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public class Getimg : IHttpHandler {
public void ProcessRequest (HttpContext context)
{
int id = int.Parse(context.Request.QueryString["id"]);
SqlConnection conn = new SqlConnection(@"server=;database=;uid=;pwd=");
SqlCommand cmd = new SqlCommand("select Image_Content from Images where Image_ID='" + id + "'", conn);
cmd.Parameters.Add("@id", SqlDbType.Int).Value = id;
conn.Open();
SqlDataReader dr = cmd.ExecuteReader();
if (dr.Read())
{
context.Response.BinaryWrite((byte[])dr["Image_Content"]);
}
dr.Close();
}
public bool IsReusable {
get {
return false;
}
}
}
兩種圖片上傳及讀取顯示方法，各有優點，個人更傾向於用第二種。因為第二種方法達到了真正的將圖片上傳到資料庫。在某些項目中，我們也可能要用到第一種方法。本例中，沒有嚴格的判斷圖片上傳的格式，學習的朋友可以自己做嚴格判斷，防止上傳的是有害檔案。如果您也好的上傳圖片及顯示圖片的方法，不妨跟帖討論，謝謝。
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
