显示从数据库检索的多个图像

Question

My project allow admin to add medal for officer profile, currently I only able to insert the maximum of 5 medals. But my teacher ask me to let the admin insert as many medal as they want for the officer profile. I not sure how do I retrieve all the image that the admin inserted, I know how to insert image into database using varbinary. Do give me way for doing this. THANKS!

Code Below is how I do for inserting at maximum of 5 medals:

Code for uploading:

System.Drawing.Image uploaded = System.Drawing.Image.FromStream(FileUpload1.PostedFile.InputStream);

System.Drawing.Image newImage = new Bitmap(1024, 768);
using (Graphics g = Graphics.FromImage(newImage))
{
    g.InterpolationMode = InterpolationMode.HighQualityBicubic;
    g.DrawImage(uploaded, 0, 0, 1024, 768);
}

byte[] results;
using (MemoryStream ms = new MemoryStream())
{
    ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders().FirstOrDefault(c => c.FormatID == ImageFormat.Jpeg.Guid);
    EncoderParameters jpegParms = new EncoderParameters(1);
    jpegParms.Param[0] = new EncoderParameter(Encoder.Quality, 95L);
    newImage.Save(ms, codec, jpegParms);
    results = ms.ToArray();
}

string sqlImage = "Insert into OfficerMedal(policeid, image) values ('" + Session["policeid"] + "', @Data)";
SqlCommand cmdImage = new SqlCommand(sqlImage);
cmdImage.Parameters.AddWithValue("@Data", results);
InsertUpdateData(cmdImage);

I retrieve image using aspx page

protected void Page_Load(object sender, EventArgs e)
    {
        string strQuery = "select image from OfficerMedal where policeid='" + Session["policeid"] + "'";
        SqlCommand cmd = new SqlCommand(strQuery);
        DataTable dt = GetData(cmd);
        if (dt != null)
        {
            download(dt);
        }
    }

    private DataTable GetData(SqlCommand cmd)
    {
        DataTable dt = new DataTable();
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
        SqlDataAdapter sda = new SqlDataAdapter();
        cmd.CommandType = CommandType.Text;
        cmd.Connection = con;
        try
        {
            con.Open();
            sda.SelectCommand = cmd;
            sda.Fill(dt);
            return dt;
        }
        catch
        {
            return null;
        }
        finally
        {
            con.Close();
            sda.Dispose();
            con.Dispose();
        }
    }

    private void download(DataTable dt)
    {
        // check if you have any rows at all 
        // no rows -> no data to convert!
        if (dt.Rows.Count <= 0)
            return;

        // check if your row #0 even contains data -> if not, you can't do anything!
        if (dt.Rows[0].IsNull("image"))
            return;

        Byte[] bytes = (Byte[])dt.Rows[0]["image"];
        Response.Buffer = true;
        Response.Charset = "";
        Response.Cache.SetCacheability(HttpCacheability.NoCache);
        Response.ContentType = "image/jpg";
        Response.BinaryWrite(bytes);
        Response.End();
    }

To add on for this current method I retrieving image 1 by 1 from database. Instead of retrieving all image that belong to the officer.

Answer 1

The usual way to do this is with a HttpHandler rather than in your ASPX page itself. The handler is responsible for retrieving the image data from your database and outputting it as a graphic; it can then be used as the src for a regular <img> tag or the ImageUrl property for an <asp:image> control.

The easiest way to add a handler is to select Generic Handler in the Add New Item dialog:

In the code for the handler, ProcessRequest is the method that does the work eg

public void ProcessRequest(HttpContext context)
{
    byte[] imageBytes;
    // Get the id of the image we want to show
    string imageId = context.Request.QueryString["ImageId"];

    // Get the image bytes out of the database
    using (SqlConnection conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString))
    {
        // Pass in the image id we got from the querystring
        SqlCommand cmd = new SqlCommand("SELECT image FROM PoliceMedal WHERE ImageId=" + imageId, conn);
        conn.Open();
        SqlDataReader reader = cmd.ExecuteReader(CommandBehavior.CloseConnection);
        reader.GetBytes(0, 0, imageBytes, 0, int.MaxValue);
    }

    context.Response.Buffer = true;
    context.Response.Charset = "";
    context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
    context.Response.ContentType = "image/jpg";
    context.Response.BinaryWrite(imageBytes);
    context.Response.End();
}

So we have our handler that will return the image data from the database, and we call this with a url like \\ImageHandler.ashx?ImageId=1 . This does require a change to your database in that you'll need to add a key to the PoliceMedal table - I suggest a SQL Server IDENTITY column.

It's not clear from your question how you're displaying the images on the ASPX page, so here I'll just show you how to add them into a PlaceHolder . So, we'll retrieve the set of image ids for an officer, construct an <asp:image> control for each of them and add the images to the PlaceHolder.

protected void Page_Load(object sender, EventArgs e)
{
    using (
        SqlConnection conn =
            new SqlConnection(WebConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString))
    {
        // Query the table to get the list of image IDs for the current user
        SqlCommand cmd = new SqlCommand("SELECT ImageId FROM PoliceMedal WHERE policeid = " + Session["policeid"], conn);
        conn.Open();
        SqlDataReader imageReader = cmd.ExecuteReader(CommandBehavior.CloseConnection);

        // For each image in the database
        while (imageReader.Read())
        {
            // Create the new Image control
            Image medalImage = new Image();
            // Call the handler, passing the id of the image in the querystring
            medalImage.ImageUrl = string.Format("ImageHandler.ashx?ImageId={0}",
                                                imageReader.GetInt32(0));
            // Add the image to the placeholder
            MedalPlaceHolder.Controls.Add(medalImage);
        }
    }
}