Home > ASP.Net > Resize Uploaded Image

Resize Uploaded Image


try this example to Resize Uploaded Image Hieght and Width and upload  it in folder

Step1:- create a website and add web page and Upload folder where i will upload image on it

step2 :- in web page

        <strong>Resize Image Hieght and Width</strong><br />
        <br />
        <asp:FileUpload ID="MyFile" runat="server" /><br />
        <br />
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Upload Image" />&nbsp;<br />
        <br />
        <div id="FileDetails" runat="server" visible="false">FileName: <span id="FileName" runat="server"></span><br/>
        ContentType: <span id="MyContentType" runat="server"></span><br/>
        ContentLength: <span id="ContentLength" runat="server">bytes
        Original Image : <asp:Image id="Image1" runat="server"></asp:Image><br/>
  Resized  Image : <asp:Image id="Image2" runat="server"></asp:Image>

and in code behind :-

protected void Button1_Click(object sender, EventArgs e)
        String UploadedFile = MyFile.PostedFile.FileName;
        int ExtractPos = UploadedFile.LastIndexOf("\\") + 1;
        //to retrieve only Filename from the complete path
        String UploadedFileName = UploadedFile.Substring
        (ExtractPos, UploadedFile.Length - ExtractPos);

        // Display information about posted file. Div is invisible by default  
        FileName.InnerHtml = UploadedFileName;
        MyContentType.InnerHtml = MyFile.PostedFile.ContentType;
        ContentLength.InnerHtml= MyFile.PostedFile.ContentLength.ToString();

        FileDetails.Visible = true; //div is made visible
        // Save uploaded file to server at the in the Pics folder
        MyFile.PostedFile.SaveAs(Request.PhysicalApplicationPath + "Upload\\" + UploadedFileName);
        //thumbnail creation starts

            //Retrieve the image filename whose thumbnail has to be created
            String imageUrl = UploadedFileName;
            //Read in the width and height
            int imageHeight = 20; //-- new image Hieght
            int imageWidth = 20;  //-- new image width
            if (imageUrl.IndexOf("/") >= 0 || imageUrl.IndexOf("\\") >= 0)
                //We found a / or \

            //the uploaded image will be stored in the Pics folder.
            //to get resize the image, the original image has to be
            //accessed from the Pics folder
            imageUrl = "Upload/" + imageUrl;
            System.Drawing.Image fullSizeImg= System.Drawing.Image.FromFile(Server.MapPath(imageUrl));
            System.Drawing.Image.GetThumbnailImageAbort dummyCallBack= new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);
            System.Drawing.Image thumbNailImg= fullSizeImg.GetThumbnailImage(imageWidth, imageHeight,dummyCallBack, IntPtr.Zero);

            //We need to create a unique filename for each generated image
            DateTime MyDate = DateTime.Now;

            String MyString = MyDate.ToString("ddMMyyhhmmss") + ".png";
            //Save the thumbnail in PNG format.
            //You may change it to a diff format with the ImageFormat property
            thumbNailImg.Save(Request.PhysicalApplicationPath+ "Upload\\" + MyString, ImageFormat.Png);

            //Display the original & the newly generated thumbnail

            Image1.AlternateText = "Original image";
            Image1.ImageUrl = "Upload\\" + UploadedFileName;
            Image2.AlternateText = "Thumbnail";
            Image2.ImageUrl = "Upload\\" + MyString;

        catch (Exception ex)
            Response.Write("An error occurred - " + ex.ToString());

    //this function is reqd for thumbnail creation
    public bool ThumbnailCallback()
        return false;

–Use these namespace

using System.Drawing.Imaging;
using System.Drawing.Drawing2D;
using System.Drawing;
using System.IO;

Hope this helps

Good Luck

Categories: ASP.Net
  1. April 16, 2009 at 6:44 pm

    I’m looking for the same thing as this but I want to resize the image then insert it into a data base I’m not that good at coding to rework this sample very good Idea though

  2. Maurice
    November 3, 2009 at 8:07 am

    It is possible to automatically resize images before sending using Flash component Q-ImageUploader. Check this out

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: