ASP.NET上传图片至数据库并显示图片

开发 后端
本文向您介绍ASP.NET上传图片至数据库并读取图片显示,主要通过以上传图片相对路径,并读取显示、二进制流的方式存入数据库,并读取显示。两种简单的方法。

今天,和大家讨论一下在ASP.NET中,如何上传图片至数据库,然后再将图片读取显示的问题。欢迎高手提出自己的方法!!!

目前,我主要用到以下两种方法:

1:上传图片的相对路径到数据库中相应字段里,读取显示时,将控件(假设用的是Image控件)的ImageUrl属性指向该相对路径即可。

2:将图片以二进制流的方式整体上传到数据库里,读取显示时,以二进制流的方式整体读出。这种方法稍微麻烦一点,但保存的是图片整体到数据库里。

***种方法,实现起来比较简单,因为存入数据库里的只是图片相对路径,当然,同时也就有很大的局限性,由于是相对路径,所以当本地的图片变换了位置

或移除,或是在其他主机上浏览该图片时,就无法显示了。第二种方法,就比较灵活了,可以用在交互性的页面,比如校友录,因为上传的是整张图片,所以只要读取正确,就能任何主机上显示出来。

下面,分别通过实际的代码,介绍这两种方法。

在这两个方法里,我将用到一个控件:FileUpload,该控件的具体用法参见百度谷歌。。。学习过程中,***的老师就是他们俩。

1:ASP.NET上传图片上传图片相对路径,并读取显示。

数据库里的字段很简单,就两个

Image_ID    int    identity(1,1)     primarykey    not null

Image_Wpath    varchar(50)        null

Image_Wpath 用来保存图片的相对路径

很简单的界面(其实是有点丑。。。。):

点击图片可以在新窗口打开

这里注意,我需要上传的文件都放在文件夹“Image”,在后面的上传路径里就需要这个文件夹。

下面是效果图:

点击图片可以在新窗口打开

我在输入框里填入Image_ID的值,读取指定的图片,在图片的下面,显示出该图片的相对路径。

接下来,我们看一下具体代码实现上传和读取显示功能。

在项目里,有一个sqlHelper类,是一些常用的数据访问方法。这里就不详细讲了。

上传按钮里的事件:

CODE:

  1. protected void Button1_Click(object sender, EventArgs e)  
  2. {  
  3. string name = FileUpload1.FileName;//获取文件名  
  4. string type = name.Substring(name.LastIndexOf(".") + 1);     
  5.  //获取文件类型  
  6. string ipath = Server.MapPath("Image") + "\\" + name;     
  7.  //获取文件路径  
  8. string wpath = "Image\\" + name;   
  9. //[color=red]设置文件保存相对路径  
  10. (这里的路径起始就是我们存放图片的文件夹名)[/color]  
  11.  
  12. string query1 = "insert into Images values 
  13. ('" + wpath + "')";  
  14.  
  15. if (type == "jpg" || type == "gif" ||   
  16. type == "bmp" || type == "png")  
  17. {  
  18.   FileUpload1.SaveAs(ipath); //服务器保存路径  
  19.   sqlHelper.ExecterNonQuery(query1);  
  20. }  

显示按钮事件:

CODE:

  1. protected void Button2_Click(object sender, EventArgs e)  
  2. {  
  3.  string query2 = "select * from Images where   
  4. Image_ID=" + Convert.ToInt32(TextBox1.Text);  
  5.  SqlDataReader sdr = sqlHelper.GetReader(query2);  
  6.  string wpath2 = "";  
  7.  while (sdr.Read())  
  8.  {  
  9.  wpath2 = sdr[1].ToString();      
  10. //获得相对路径  
  11.  }  
  12.  sdr.Close();  
  13.  Image1.ImageUrl = wpath2;      
  14. //图片显示路径就是相对路径  
  15.  Label1.Text = wpath2;    //显示相对路径  
  16. }  

2:以二进制流的方式存入数据库,并读取显示图片。

数据库的字段同样简单:

Image_ID    int    identity(1,1)     primarykey    not null

Image_Content     image null

Image_Content以二进制形式保存图片

整体看一下例子里的页面组成:

点击图片可以在新窗口打开

ASP.NET上传图片页面和***种方法一样,同样是用到FileUpload,以及一个Button,具体代码如下:

CODE:

  1. protected void Button1_Click(object sender, EventArgs e)  
  2. {  
  3. string name = FileUpload1.PostedFile.FileName;  
  4. string type = name.Substring(name.LastIndexOf(".") + 1);   
  5. FileStream fs = File.OpenRead(name);  
  6. byte[] content = new byte[fs.Length];  
  7. fs.Read(content, 0, content.Length);  
  8. fs.Close();  
  9.  
  10. SqlConnection conn = new SqlConnection("Data   
  11. Source=;Initial Catalog=;Persist Security   
  12. Info=True;User ID=;Pooling=False;Password=");  
  13. SqlCommand cmd = conn.CreateCommand();  
  14. conn.Open();  
  15. cmd.CommandText = "insert into Images  
  16. (Image_Content) values (@content)";  
  17. cmd.CommandType = CommandType.Text;  
  18.  
  19. if (type == "jpg" || type == "gif" ||   
  20. type == "bmp" || type == "png")  
  21. {  
  22. SqlParameter para = cmd.Parameters.Add 
  23. ("@content", SqlDbType.Image);  
  24. para.Value = content;  
  25. cmd.ExecuteNonQuery();  
  26. }  
  27. }  

显示一张图片和显示一组图片有所不同,将会分别说明之。

显示一张图片,要用到Default.aspx和Default2.aspx。Default.aspx中有一个控件Image,它的属性ImageUrl指向Default2.aspx用于显示图片。

Default2.aspx用于读取图片。

点击图片可以在新窗口打开

Default.aspx.cs

CODE:

  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3. Image1.ImageUrl = "Default2.aspx";  
  4. }  

Default2.aspx.cs

CODE:

  1. string imgid = Request.QueryString["imgid"];  
  2. SqlConnection conn1 = new SqlConnection  
  3. ("Data Source=;Initial Catalog=;Persist Security   
  4. Info=True;User ID=sa;Pooling=False;Password=");  
  5. SqlCommand cmd1 = new SqlCommand("select Image_Content   
  6. from Images where Image_ID=3", conn1);       
  7. //固定显示Image_ID为3的图片  
  8. conn1.Open();  
  9. SqlDataReader sdr = cmd1.ExecuteReader();  
  10. if (sdr.Read())  
  11. {  
  12. Response.BinaryWrite((byte[])sdr["Image_Content"]);  
  13. }  
  14. Response.End(); 

显示一组图片时,用ashx Handle存放图片。同时用GridView以列显示图片。Image控件绑定Image_ID。

点击图片可以在新窗口打开

allimage.aspx

CODE:

  1. 〈%@ Page Language="C#" AutoEventWireup="true"   
  2. CodeFile="allimage.aspx.cs" Inherits="allimage" % 〉  
  3. 〈!DOCTYPE html PUBLIC "-//W3C//DTD XHTML   
  4. 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1  
  5. /DTD/xhtml1-transitional.dtd" 〉  
  6. 〈HTML xmlns="http://www.w3.org/1999/xhtml" 〉   
  7. 〈HEAD runat="server" 〉   
  8. 〈title 〉BindImg〈/title 〉   
  9. 〈/HEAD 〉   
  10. 〈body 〉   
  11. 〈form id="Form1" method="post" runat="server" 〉   
  12. 〈FONT face="宋体" 〉   
  13. 〈asp:DataGrid id="MyDataGrid" runat="server"   
  14. AutoGenerateColumns="False" Width="632px" 〉   
  15. 〈AlternatingItemStyle BackColor="Beige" 〉  
  16. 〈/AlternatingItemStyle 〉   
  17. 〈HeaderStyle HorizontalAlign="Center" 〉  
  18. 〈/HeaderStyle 〉   
  19. 〈Columns 〉   
  20. 〈asp:TemplateColumn HeaderText="Photo" 〉   
  21. 〈ItemTemplate 〉 〈asp:Image ID="Image1" runat="server"   
  22. Height="70px" ImageUrl='  
  23. 〈%# "Getimg.ashx?id="+Eval("Image_ID") % 〉'  
  24. Width="100px" / 〉  
  25. 〈/ItemTemplate 〉   
  26. 〈/asp:TemplateColumn 〉   
  27. 〈/Columns 〉   
  28. 〈/asp:DataGrid 〉〈/FONT 〉   
  29. 〈asp:SqlDataSource ID="SqlDataSource1" runat="server"   
  30. ConnectionString="  
  31. 〈%$ ConnectionStrings:PracticeConnectionString % 〉"  
  32. SelectCommand="SELECT * FROM [Images]" 〉  
  33. 〈/asp:SqlDataSource 〉  
  34. 〈/form 〉   
  35. 〈/body 〉   
  36. 〈/HTML 〉  

allimage.aspx.cs

CODE:

  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3. MyDataGrid.DataSource = SqlDataSource1;  
  4. MyDataGrid.DataBind();  
  5. }  

Getimg.ashx

CODE:

  1. 〈%@ WebHandler Language="C#" Class="Getimg" %〉  
  2.  
  3. using System;  
  4. using System.Web;  
  5. using System.Data;  
  6. using System.Data.SqlClient;  
  7. using System.Configuration;  
  8.  
  9. public class Getimg : IHttpHandler {  
  10. public void ProcessRequest (HttpContext context)  
  11. {  
  12. int id = int.Parse(context.Request.QueryString["id"]);  
  13. SqlConnection conn = new SqlConnection  
  14. (@"server=;database=;uid=;pwd=");  
  15. SqlCommand cmd = new SqlCommand  
  16. ("select Image_Content from   
  17. Images where Image_ID='" + id + "'", conn);  
  18. cmd.Parameters.Add("@id", SqlDbType.Int).Value = id;  
  19. conn.Open();  
  20. SqlDataReader dr = cmd.ExecuteReader();  
  21. if (dr.Read())  
  22. {  
  23. context.Response.BinaryWrite((byte[])dr  
  24. ["Image_Content"]);   
  25. }  
  26. dr.Close();  
  27. }  
  28. public bool IsReusable {  
  29. get {  
  30. return false;  
  31. }  
  32. }  
  33. }  

总结:

两种ASP.NET上传图片及读取显示方法,各有优点,个人更倾向于用第二种。因为第二种方法达到了真正的将图片上传到数据库。在某些项目中,我们也可能要用到***种方法。本例中,没有严格的判断图片上传的格式,学习的朋友可以自己做严格判断,防止上传的是有害文件。

【编辑推荐】

  1. ASP.NET环境下的Shell函数
  2. 在ASP.NET中向数据库批量插入数据
  3. ASP.NET用Post方式向网页发送数据
  4. ASP.NET 2.0部署WEB应用程序浅析
  5. ASP.NET中的HttpWorkerRequest对像
  6. 介绍ASP.NET MVC框架
责任编辑:冰荷 来源: cnblogs
相关推荐

2009-07-31 13:52:26

ASP.NET数据库图

2012-04-06 13:52:58

ASP.NET

2009-08-12 11:04:38

ASP.NET和SQL

2009-07-31 16:09:23

ASP.NET数据库图

2009-07-28 17:36:21

ASP.NET数据库连

2009-02-23 15:20:03

SQL Server数据库ASP.NET

2009-07-31 09:57:47

ASP.NET数据库缓

2009-08-12 17:02:16

.NET向SQL Se

2011-04-19 10:32:28

图片数据库

2009-07-29 10:02:49

ASP.NET上传

2009-08-11 12:52:05

ASP.NET数据库程

2009-08-05 15:40:49

ASP.NET连接数据

2009-07-23 14:08:58

2009-07-29 09:12:31

ASP.NET数据库连

2009-07-28 14:16:31

ASP.NET与MyS

2009-07-27 16:53:15

ASP.NET 2.0

2010-05-25 08:49:33

连接MySQL

2009-09-13 22:35:12

ASP.NET数据库

2009-07-27 17:58:10

ASP.NET数据库编

2009-07-27 16:09:05

GridView显示数
点赞
收藏

51CTO技术栈公众号