Asp.net Vb Best and Fastest Way to Upload and Display Images

Background

Subsequently my article Uploading Images to Database Using ASP.Internet C#  I accept often been asked how to upload images to a database and displaying them from the database using ASP.Internet C#. And so to satisfy those the requirements I decided to write this article especially focusing on beginners and those who want to learn how to upload images to a database and display those images.

Now before creating the application, permit us create a tabular array named "ImageToDB" or whatever name you wish in a database to store the uploaded image files in a database table having the following fields (shown in the following epitome),

And so later that don't forget to ready the identity specification of the id column to yes, considering in this awarding Id is an important role for retrieving the images, if you don't know how to gear up it then see the following example.

When you select the id column of the above table and then it shows the column backdrop as,

Now in the prototype above, yous run across the "Is Identity" property, set it to "yep".

In the preceding table, the ImageName column name is used to store the name of an image file and the image is used to store the image file .

I hope you accept created the same type of tabular array.

Now permit us starting time to create an application to upload and display image files step-by-footstep.

At present create the project every bit,

1. "Beginning" - "All Programs" - "Microsoft Visual Studio 2010".
2. "File" - "New Project" - "C#" - "Empty Project" (to avert adding a master page).
3. Give the projection a name, such every bit "DisplayingImages" or some other equally you lot wish and specify the location.
4. Then right-click on Solution Explorer - "Add New Item" - "Default.aspx" page.
5. I File upload command, one Button, ane TextBox, one label and one Image control to display images.

Then the <form> section of the Default.aspx page looks as in the following,

1. <form id= "form1"  runat= "server" >
2.     <tr> Proper noun
3.         <td>
4.             <asp:TextBox ID="TextBox1"  runat= "server"  /> </td>
5.         <td>
6.             <td> Select Image </td>
7.             <td>
8.                 <asp:FileUpload ID="FileUpload1"  runat= "server"  /> </td>
9.         </td>
10.     </tr>
11.     </table>
12.     <tabular array>
13.         <tr>
14.             <td>
15.                 <p>
16.                     <asp:Label ID="Label2"  runat= "server"  Text= "label" ></asp:Label>
17.                 </p>
18.             </td>
19.         </tr>
20.     </table>
21.     </div>
22. </course>

Now we demand to add together a Handler file to our project to display images from the database because we are saving images in binary format to get the binary formatted information we are using the Handler class. To know more than about the handler class delight refer to the MSDN forum.

Adding Handler Course

1. Right-click on your project add a new Handler1.ashx file as,

In the preceding image, nosotros tin can encounter the .ashx extension file, now keep the name as it is or alter it every bit yous wish, I accept kept information technology as information technology is because the next time you can easily remember it and click on the add button, at present later on that your Solution Explorer will look as in the following,

Now switch to design mode to code behind and create the following method to upload the image files as,

1. individual void  Imageupload()
2. {
3. if  (FileUpload1.HasFile)
4.     {
5. int  imagefilelenth = FileUpload1.PostedFile.ContentLength;
6. byte [] imgarray = new byte [imagefilelenth];
7.         HttpPostedFile image = FileUpload1.PostedFile;
8.         image.InputStream.Read(imgarray, 0, imagefilelenth);
9.         connection();
10.         query ="Insert into ImageToDB (ImageName, Prototype) values (@Proper name, @Image)" ;
11.         SqlCommand com =new  SqlCommand(query, con);
12.         com.Parameters.AddWithValue("@Proper name" , SqlDbType.VarChar).Value = TextBox1.Text;
13.         com.Parameters.AddWithValue("@Prototype" , SqlDbType.Image) Value = imgarray;
14.         com.ExecuteNonQuery();
15.         Label1.Visible =truthful ;
16.         Label1.Text ="Epitome Is Uploaded successfully" ;
17.         imagebindGrid();
18.     }
19. }

Now double-click on the "Imageupload" push button and call the preceding method on information technology as,

1. protected void  upload( object  sender, EventArgs e)
2. {
3.     Imageupload();
4. }

At present, create the method to bind to the GridView as,

1. public void  imagebindGrid()
2. {
3.     connection();
4.     query ="Select id, ImageName, Image from ImageToDB" ;
5.     SqlCommand com =new  SqlCommand(query, con);
6.     SqlDataReader dr = com.ExecuteReader();
7.     Gridview1.DataSource = dr;
8.     Gridview1.DataBind();
9. }

And call preceding "Imagebindgirdmethod"() on page load as,

1. protected void  Page_Load( object  sender, EventArgs due east)
2. {
3.     Label1.Visible =false ;
4. if  (!IsPostBack)
5.         imagebindGrid();
6. }

Now, open the "Handler1.ashx.cs" and write the following lawmaking,

1. public class  Handler1 : IHttpHandler
2. {
5.     Default cls =new  Default();
6. public void  ProcessRequest(HttpContext context)
7.     {
9. string  displayimgid = context.Asking.QueryString[ "id_Image" ].ToString();
10.         cls.connexion();
13.         cls.query ="select Image from ImageToDB where id="  + displayimgid;
14.         SqlCommand com =new  SqlCommand(cls.query, cls.con);
15.         SqlDataReader dr = com.ExecuteReade();
16.         dr.Read();
17.         context.Response.BinaryWrite((Byte[])dr[0]);
18.         context.Response.End();
19.     }
20. }

In the preceding Handler1.ashx.cs file, outset I have created the object of the default.aspx.cs form to use the connection method and variable to avoid the repetition of lawmaking because in the handler.ashx.cs file we too need the aforementioned connexion method and string variables that are in the default.aspx.cs class.

At present, the most important thing is to specify the image URL property of the epitome command that display the images from the database, and so let united states of america encounter how to do it.

ImageUrl='<%# "Handler1.ashx?id_Image="+ Eval("id") %>'

Now run, the application that will look similar as in the following,

At present upload the images that will display the output as follows,

In preceding output, y'all can clearly see that my uploaded image is displayed in the GridView with file name and prototype.

Note

• For detailed lawmaking please download the zero file attached higher up.
• Don't forget to update the "Web.config" file for your server location.

Summary

Now nosotros have learned how to upload images to a database and display those images in GridView. I hope this article is useful for all students and beginners. If you have any suggestion related to this article then please contact me.

moneyjohictor.blogspot.com

Source: https://www.c-sharpcorner.com/UploadFile/0c1bb2/uploading-and-displaying-images-from-database-using-Asp-Net/

Share :