Для начала надо создать таблицу. В которой мы будем хранить наши картинки. Создадим таблицу Categories с полями:
CategoryID int identity Уникальный идентификатор
CategoryName varchar(100) Название категории
Picture image Картинка
Добавим туда несколько записей, что бы можно было проверить пример.
Для отображения картинки мы создадим ASP.NET WebHandlers (файл с расширением ashx). Добавим его в проект: Проект – Добавить новый элемент – Универсальный обработчик. Наховем его Handler. В итоге VS создаст 2 файла:
Handler.ashx – это файл разметки. Там есть только одна строка
<%@ WebHandler Language="C#" CodeBehind="Handler.ashx.cs" Class="WebApplication1.Handler" %>.
Handler1.ashx.cs – это файл CodeBehind.
Он нам не понадобится, так что его можно смело удалить. А поскольку мы его удаляем, то надо поправить файл разметки, а именно – убрать ссылку на файл CodeBehind. Вот, что получилось:
<%@ WebHandler Language="C#" Class="Handler" %>
Созданный нами обработчик обязательно должен обрабатывать 2 метода:
public void ProcessRequest (HttpContext context) public bool IsReusable
Метод IsReusable всегда будет возвращать значение FALSE
public bool IsReusable { get { return false; } }
А в методе ProcessRequest мы будем вытаскивать картинку из БД.
public void ProcessRequest (HttpContext context) { SqlConnection con = new SqlConnection(); con.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString; // Create SQL Command SqlCommand cmd = new SqlCommand(); cmd.CommandText = "SELECT CategoryName, Picture FROM Categories where CategoryID = @CategoryID"; cmd.CommandType = System.Data.CommandType.Text; cmd.Connection = con; SqlParameter ImageID = new SqlParameter("@CategoryID", System.Data.SqlDbType.Int); ImageID.Value = context.Request.QueryString["CategoryID"]; cmd.Parameters.Add(ImageID); con.Open(); SqlDataReader dReader = cmd.ExecuteReader(); dReader.Read(); context.Response.BinaryWrite((byte[])dReader["Picture"]); dReader.Close(); con.Close(); }
Ниже приведен полный код Handler.ashx
<%@ WebHandler Language="C#" Class="Handler" %>
using System; using System.Web; using System.Configuration; using System.Data.SqlClient; public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { SqlConnection con = new SqlConnection(); con.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString; // Create SQL Command SqlCommand cmd = new SqlCommand(); cmd.CommandText = "SELECT CategoryName, Picture FROM Categories where CategoryID = @CategoryID"; cmd.CommandType = System.Data.CommandType.Text; cmd.Connection = con; SqlParameter ImageID = new SqlParameter("@CategoryID", System.Data.SqlDbType.Int); ImageID.Value = context.Request.QueryString["CategoryID"]; cmd.Parameters.Add(ImageID); con.Open(); SqlDataReader dReader = cmd.ExecuteReader(); dReader.Read(); context.Response.BinaryWrite((byte[])dReader["Picture"]); dReader.Close(); con.Close(); } public bool IsReusable { get { return false; } } }
Теперь займемся страницей Default.aspx. Сразу приведу ее код разметки:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="txtName" runat="server"></asp:TextBox> <asp:FileUpload ID="FileUpload1" runat="server" /><br /> <br /> <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" /><br /> <br /> <asp:Label ID="lblMessage" runat="server"></asp:Label><br /> <br /> <br /> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CategoryID" DataSourceID="SqlDataSource1"> <Columns> <asp:BoundField DataField="CategoryID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="CategoryID" /> <asp:BoundField DataField="CategoryName" HeaderText="ImageName" SortExpression="CategoryName" /> <asp:TemplateField HeaderText="Image"> <ItemTemplate> <asp:Image ID="Image1" runat="server" ImageUrl='<%# "Handler.ashx?CategoryID=" + Eval("CategoryID")%>'/> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT CategoryID, CategoryName, Picture FROM Categories"></asp:SqlDataSource> </div> </form> </body> </html>
На что стоит обратить внимание:
У нас создано 2 поля ввода, одно из которых только для чтения, в котором будет отображаться путь к закачиваемой картинке, а во втором описание. Так же присутствует GridView, у которого 3 поля. Первые 2 из них – обычные текстовые поля, в которых отражается CategoryID и CategoryName. Третье же поле – это TemplateField, в котором есть элемент Image, куда и будет загружаться картинка. У элемента Image есть атрибут
ImageUrl='<%# "Handler.ashx?CategoryID=" + Eval("CategoryID")%>'
Это ссылка на созданный Универсальный обработчик. Ему передается только один параметр – CategoryID, по которому мы и вытаскиваем картинку, которая в свою очередь отражается в этом элементе Image.
Поскольку мы еще и загружаем картинки в БД при нажатии кнопки, то ниже приведен обработчик ее нажатия:
protected void btnUpload_Click(object sender, EventArgs e) { string strImageName = txtName.Text.ToString(); if (FileUpload1.PostedFile != null && FileUpload1.PostedFile.FileName != "") { byte[] imageSize = new byte[FileUpload1.PostedFile.ContentLength]; HttpPostedFile uploadedImage = FileUpload1.PostedFile; uploadedImage.InputStream.Read(imageSize, 0, (int)FileUpload1.PostedFile.ContentLength); // Create SQL Connection SqlConnection con = new SqlConnection(); con.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString; // Create SQL Command SqlCommand cmd = new SqlCommand(); cmd.CommandText = "INSERT INTO Categories(CategoryName,Picture) VALUES (@ImageName,@Image)"; cmd.CommandType = CommandType.Text; cmd.Connection = con; SqlParameter ImageName = new SqlParameter("@ImageName", SqlDbType.VarChar, 50); ImageName.Value = strImageName.ToString(); cmd.Parameters.Add(ImageName); SqlParameter UploadedImage = new SqlParameter("@Image", SqlDbType.Image, imageSize.Length); UploadedImage.Value = imageSize; cmd.Parameters.Add(UploadedImage); con.Open(); int result = cmd.ExecuteNonQuery(); con.Close(); if (result > 0) lblMessage.Text = "File Uploaded"; GridView1.DataBind(); } }
Комментарии
Отправить комментарий