Introduction:
In this article I will explain how to insert images into our project folder and display the images from folder in gridview based on images path in database using asp.net.
Description:
In my previous article I explained clearly how to insert images into database and display images from database into gridview. Now I will explain how to insert images into our project folder and insert images path into database and display images in gridview from images folder based on Images path in database. For that first create new website after that right click on your website and add new folder and give name as Upload because here I used same name for my sample if you want to change folder name you need to change the Upload folder name in your code behind also first design table in your database like this to save images path in database.
In my previous article I explained clearly how to insert images into database and display images from database into gridview. Now I will explain how to insert images into our project folder and insert images path into database and display images in gridview from images folder based on Images path in database. For that first create new website after that right click on your website and add new folder and give name as Upload because here I used same name for my sample if you want to change folder name you need to change the Upload folder name in your code behind also first design table in your database like this to save images path in database.
Column Name | Data Type | Allow Nulls |
Imag_ID | int(set identity property=true) | No |
Imag_Name | varchar(100) | Yes |
Imag_Path | nvarchar(max) | Yes |
Now Design your aspx page like this
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Save Images In Folder and show Images in Gridview from folder</title> <style type="text/css"> .Gridviewimg { font-family:arial; font-size:10pt; font-weight:normal; color:black; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:FileUpload ID="ImgUpload" runat="server" /> <br /> <asp:Button ID="btnUpload" runat="server" Text="Upload" onclick="btnUpload_Click" /> </div> <div> <asp:GridView runat="server" ID="GVImages" AutoGenerateColumns="false" DataSourceID="sqldataImages" CssClass="Gridviewimg" HeaderStyle-BackColor="#61A6F8" > <Columns> <asp:BoundField DataField="Imag_ID" HeaderText="ID" /> <asp:BoundField DataField="Imag_Name" HeaderText="Image Name" /> <asp:ImageField HeaderText="Image" DataImageUrlField="Imag_Path" /> </Columns> </asp:GridView> <asp:SqlDataSource ID="datasource1" runat="server" ConnectionString="<%$ConnectionStrings:dbconnection %>" SelectCommand="select * from tblUpload_Image" > </asp:SqlDataSource> </div> </form> </body> </html> |
After completion of .aspx page design add using System.IO; namespaces in .cs and write the following code
protected void btnUpload_Click(object sender, EventArgs e) { //Get Filename from fileupload control string filename = Path.GetFileName(ImgUpload.PostedFile.FileName); //Save images into Images folder ImgUpload.SaveAs(Server.MapPath("Upload/"+filename)); //Getting dbconnection from web.config connectionstring SqlConnection con = newSqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ToString()); //Open the database connection con.Open(); //Query to insert images path and name into database SqlCommand cmd = new SqlCommand("Insert into tblUpload_Image(Imag_Name,Imag_Path) values('"+filename+"',"+"Upload/" + filename+")", con); cmd.ExecuteNonQuery(); //Close dbconnection con.Close(); Response.Redirect(UploadImg.aspx"); } |
After that set your database connection in web.config like this because we are using this connection in our sqldatasource to get the data from database
<connectionStrings> <add name="dbconnection" connectionString="Data Source=MANISH-PC\SQLEXPRESS;Initial Catalog=demo;User ID=sa;Password=server" providerName="System.Data.SqlClient" /></connectionStrings > |
No comments:
Post a Comment