Geeks With Blogs

News

Microsoft MVP


Moderator at CodeASP.NET


Quiz Master




free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

I wrote a series of blog posts awhile back before that demonstrates the following:


In this post I'm going to demonstrate how to upload image to a specified folder within the root of the web application and  display the image right away in the Image control after uploading. To get started lets go ahead and fire up Visual Studio and create a new Website/Web Application project. After that create a folder under the root application for storing the uploaded images. The folder structure would look something like this below:

Solution
  -Application Name
  -AppCode
  -AppData
  -ImageStorage   - //we will save the images in this folder
  -Default.aspx
  -web.config

Now lets design our WebForm. For the simplicity of this demo, I just set up the form like below:

ASPX:

   1:      <asp:FileUpload ID="FileUpload1" runat="server" />
   2:      <asp:Button ID="Button1" runat="server" Text="Upload" onclick="Button1_Click"/>
   3:      <br />
   4:      <asp:Image ID="Image1" runat="server" />

 

And here's the code for uploading the image to a folder.

CODE BEHIND:

 

   1:  protected void Button1_Click(object sender, EventArgs e) {
   2:              StartUpLoad();
   3:          }
   4:   
   5:          private void StartUpLoad() {
   6:              //get the file name of the posted image
   7:              string imgName = FileUpload1.FileName;
   8:              //sets the image path
   9:              string imgPath = "ImageStorage/" + imgName;          
  10:              //get the size in bytes that
  11:   
  12:              int imgSize = FileUpload1.PostedFile.ContentLength;
  13:              
  14:              //validates the posted file before saving
  15:              if (FileUpload1.PostedFile != null && FileUpload1.PostedFile.FileName != "") {
  16:                  // 10240 KB means 10MB, You can change the value based on your requirement
  17:                  if (FileUpload1.PostedFile.ContentLength > 10240) {
  18:                      Page.ClientScript.RegisterClientScriptBlock(typeof(Page), "Alert", "alert('File is too big.')", true);
  19:                  }
  20:                  else {
  21:                      //then save it to the Folder
  22:                      FileUpload1.SaveAs(Server.MapPath(imgPath));
  23:                      Image1.ImageUrl = "~/" + imgPath;
  24:                      Page.ClientScript.RegisterClientScriptBlock(typeof(Page), "Alert", "alert('Image saved!')", true);
  25:                  }
  26:   
  27:              }
  28:          }

 

As you can see the code above is very straight forward and self explanatory. Here are the sample screen shots of the output:

On initial load:

Browsing an image:

 

After uploading:


That's it! I hope someone find this post useful!

Technorati Tags: ,,
Posted on Thursday, January 20, 2011 10:29 PM ASP.NET , C# | Back to top


Comments on this post: Uploading Image to a Folder and Display the Image after Upload

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
why do you like monkeys?
Left by sleepless me on Mar 01, 2011 8:37 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
@sleepless,

Quick Answer - because they're fun to look at. =}
Left by Vinz on Mar 01, 2011 8:39 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
Its very useful article...........It helped me a lot..........Thanxxxxxxxxx
Left by Meera on Mar 17, 2011 6:48 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
Its helpful but on working when i give the imagepath then my project not working plz do needful...
Left by Satyajeet on Jul 11, 2011 7:44 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
hi.. i'm like develop emplyee detail with image or pic store in database. After thats details display in gridview how. i'm try some code but not work.that is use handler.ashx. store details but not display in girdview pls help me..
Left by siva on Jul 29, 2011 4:42 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
<%@ 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["connstr"].ConnectionString;


SqlCommand cmd = new SqlCommand();

cmd.CommandText = "Select * from empdetails" + " where Sno =@Sno";
cmd.CommandType = System.Data.CommandType.Text;
cmd.Connection = con;

SqlParameter imSno = new SqlParameter("@Sno", System.Data.SqlDbType.Int);

imSno.Value = context.Request.QueryString["Sno"];
cmd.Parameters.Add(imSno);
con.Open();

SqlDataReader dReader = cmd.ExecuteReader();

dReader.Read();

context.Response.BinaryWrite((byte[])dReader["photo"]);
dReader.Close();
con.Close();
}
public bool IsReusable
{
get
{
return false;
}
}
}
NOte:
phote database filed name
sno is data

error:
Prepared statement '(@Sno int)Select * from empdetails where Sno =@Sno' expects parameter @Sno, which was not supplied.
Left by siva on Jul 29, 2011 4:48 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
Prepared statement '(@Sno int)Select Name,PetName,photo,Designation,Place,EmpCode,Da' expects parameter @Sno, which was not supplied.
Statement(s) could not be prepared.
Left by siva on Jul 29, 2011 7:14 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
It's really a useful post..Thanks..Now m going to save this path in database..it will be easy for huge applications.
Left by Gaganjyot on Nov 22, 2011 2:51 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
Thank You...
Its really Useful...
Left by Mehul on Apr 15, 2012 3:51 AM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
Awesome! Can I call you a GURU? Thank you for this wonderful example.
Left by elija on Apr 20, 2012 5:25 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
it was helpful , but i want to show these images that saved in ImageStorage folder in other pages when i click button or loading page , what should i do ?
Left by Alex on Apr 30, 2012 5:23 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
can please help me how to use got focus events in web forms am using asp.net c#
Left by anusha on May 17, 2012 12:51 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
hello frnds..in this code..if any body is having problem..
plz change the path
like this.
string imgPath = "ImageStorage/" + imgName;
change //---- string imgPath = "~/ImageStorage/" + imgName;-----//
and change this line also
Image1.ImageUrl = "~/" + imgPath;
//------Image1.ImageUrl = imgPath;-----------------//
ENjoy
Left by Appaji.angara on Aug 14, 2012 6:09 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
if i want to save these images permanent in this folder and want to see these as a album like facebook then how can i do it.
Left by Hari Sharma on Aug 27, 2012 2:23 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
Hey, Thanks a lot, It helped me greatly.. Plz Keep posting such articles..
Left by Santosh on Sep 24, 2012 12:41 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
thanks for the post help me a lot
Left by prakash on Sep 24, 2012 6:34 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
Thank You for this article, really it is very useful website.
please tell me steps for sending mail through ASP.NET and C#. I tried but could not be successful.
Left by Ashish Tiwari on Oct 04, 2012 2:06 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
Thank You for this article, really it is very useful website.
Left by Bhanu on Oct 11, 2012 5:42 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
Thank You Very Much. But i need this code in Vb not in c#. Please help Me....
Left by Santhosh on Oct 31, 2012 3:50 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
nice post for image thanks yar keep it up....
Left by manish on Dec 27, 2012 5:02 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
it was helpful , but i want to show these images that saved in ImageStorage folder in other pages when i click button or loading page , could you please help me??
Left by Deepika on Jan 03, 2013 4:38 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
Thank You Very Much.
Left by anu on Jan 17, 2013 6:00 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
Ofline it is working correctly but online it show error
Left by anu on Jan 18, 2013 5:22 PM

# re: Uploading Image to a Folder and Display the Image after Upload
Requesting Gravatar...
Superb...Thanks a lot
Left by david on Feb 01, 2013 6:30 AM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net | Join free