Convert High Resolution uploaded Image to Thumbnail

To convert uploaded image to thumbnail this article provides a few steps which will be easy to follow.

With the use of following code you can convert all uploaded images to thumbnail images.

To convert uploaded image to thumbnail this article provides a few steps which will be easy to follow.

Step 1:

Design a Form drag FileUpload Control from toolbox .I have Taken 10 FileUpload Control.

<table class="style3">

            <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td colspan="3">
                <fieldset>
            <legend>Upload Multiple Photos</legend>
            <div id="div1" runat="server">
                <input type="file" size="65" runat="server" id="FileUpload1">
                <input type="file" size="65" runat="server" id="FileUpload2">
                <input type="file" size="65" runat="server" id="FileUpload3">
                <input type="file" size="65" runat="server" id="FileUpload4">
                <input type="file" size="65" runat="server" id="FileUpload5">
            </div>
            <br />
            <div id="div2" runat="server" visible="false">
                <input type="file" size="65" runat="server" id="FileUpload6">
                <input type="file" size="65" runat="server" id="FileUpload7">
                <input type="file" size="65" runat="server" id="FileUpload8">
                <input type="file" size="65" runat="server" id="FileUpload9">
                <input type="file" size="65" runat="server" id="FileUpload10">
            </div>
            <asp:Label ID="lblError1" runat="server" Text="Label"></asp:Label>
                                    <asp:Label ID="MessageLabel" runat="server" ForeColor="Red"></asp:Label>
            <br />
            <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click"
                style="height: 26px" />
            <asp:Button ID="ButtonMore" runat="server" Text="Add 10 Photos" OnClick="ButtonMore_Click" />
                    &nbsp;&nbsp;
            </fieldset>
            <br />
            <div id="div5" runat="server" visible="false">

        </div>
            </td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
    </table>

Step 2:

On Upload button's Click event write following code…..

Directory.CreateDirectory(Server.MapPath("RealImage\\"));

        div5.Visible = true;
        HttpFileCollection uploadFilCol = Request.Files;

        Control[] f = new Control[10]{FileUpload1,
                    FileUpload2,
                    FileUpload3,
                    FileUpload4,
                    FileUpload5,
                    FileUpload6,
                    FileUpload7,
                    FileUpload8,
                    FileUpload9,
                    FileUpload10 };

        for (int i = 0; i < uploadFilCol.Count; i++)
        {

            HttpPostedFile file = uploadFilCol[i];

            string fileExt = Path.GetExtension(file.FileName).ToLower();
            string fileName = Path.GetFileName(file.FileName);

            HtmlInputFile htmlFile = (HtmlInputFile)f[i];
            if (htmlFile.PostedFile.ContentLength > 0)
            {

                string sFormat = String.Format("{0:#.##}", (float)htmlFile.PostedFile.ContentLength / 2048);
                if (float.Parse(sFormat) < float.Parse("2048"))
                {
                    if (htmlFile.PostedFile != null)
                    {
                        ViewState["ImageName"] = htmlFile.PostedFile.FileName.Substring(htmlFile.PostedFile.FileName.LastIndexOf("\\") + 1);//browseImagePath[0];                   
                    }
                    else
                    {
                        ViewState["ImageName"] = "";
                    }
                else
                {
                    lblError1.Visible = true;
                lblError1.Text = "Image Size is Large, please resize it !!";
                }
            }
            else
            {
                ViewState["ImageName"] = "";
                if (ViewState["ImageName"].ToString() == "")
                {
                    lblError1.Visible = true;
                    lblError1.Text = "Attach an image to upload";
                }
 
            }
            MakeThumbnail(htmlFile);
 
        }

Write Thumbnailcallback function which is returning true

    public bool ThumbnailCallback()
    {
        return true;
    }

Step 3:

On More Button's click event write following code,with the use of this code you can enable 10 file upload control ,means you can upload 10 files at a time.

       protected void ButtonMore_Click(object sender, EventArgs e)
       {

         if (ButtonMore.Text == "Only five")
            {
                div2.Visible = false;
                ButtonMore.Text = "Add 10 Photos";
              
            }
            else if (ButtonMore.Text == "Add 10 Photos")
            {
                div2.Visible = true;
                ButtonMore.Text = "Only five";
            
            }
        }
        }

Step 4:

Write Following Function which is use to convert high resolution image to thumbnail.

private void MakeThumbnail(HtmlInputFile htmlFile)
    {
        System.Drawing.Image myThumbnail150;
        object obj = new object();
        obj = htmlFile;
        System.Drawing.Image.GetThumbnailImageAbort myCallback = new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);
        HtmlInputFile hFile = (HtmlInputFile)obj;
        if (hFile.PostedFile != null && hFile.PostedFile.ContentLength > 0)
        {
            //this code used to remove some symbols between image name and replace with space
            string imgname1 = hFile.PostedFile.FileName.Replace('%', ' ').Substring(hFile.PostedFile.FileName.LastIndexOf("\\") + 1);
            string imgname2 = imgname1.Replace('#', ' ').Substring(imgname1.LastIndexOf("\\") + 1);
            string imgname3 = imgname2.Replace('@', ' ').Substring(imgname1.LastIndexOf("\\") + 1);
            string imgname4 = imgname3.Replace(',', ' ').Substring(imgname1.LastIndexOf("\\") + 1);
            string imgname5 = imgname4.Replace('&', ' ').Substring(imgname1.LastIndexOf("\\") + 1);

            Finalimagename = imgname5.ToString();

            string imgname = hFile.PostedFile.FileName.Substring(hFile.PostedFile.FileName.LastIndexOf("\\") + 1);
            string sExtension = imgname.Substring(imgname.LastIndexOf(".") + 1);

            //this code is used to check image extension
            if (sExtension.ToLower() == "jpg" || sExtension.ToLower() == "gif" || sExtension.ToLower() == "bmp" || sExtension.ToLower() == "jpeg" || sExtension.ToLower() == "png")
            {
                if (!File.Exists(MapPath("RealImage\\" + Finalimagename)))
                {
                    hFile.PostedFile.SaveAs(ResolveUrl(Server.MapPath("RealImage\\" + Finalimagename)));

                    System.Drawing.Image imagesize = System.Drawing.Image.FromFile(ResolveUrl(Server.MapPath("RealImage\\" + Finalimagename)));
                    Bitmap bitmapNew = new Bitmap(imagesize);
                    if (imagesize.Width < imagesize.Height)
                    {

                        myThumbnail150 = bitmapNew.GetThumbnailImage(150 * imagesize.Width / imagesize.Height, 150, myCallback, IntPtr.Zero);

                    }
                    else
                    {
                        myThumbnail150 = bitmapNew.GetThumbnailImage(150, imagesize.Height * 150 / imagesize.Width, myCallback, IntPtr.Zero);

                    }
                    //Create a new directory name ThumbnailImage
                    Directory.CreateDirectory(Server.MapPath("ThumbnailImage"));
                    //Save image in TumbnailImage folder
                    myThumbnail150.Save(ResolveUrl(Server.MapPath("ThumbnailImage\\")) + Finalimagename, System.Drawing.Imaging.ImageFormat.Jpeg);
                    MessageLabel.Text = "Successfully uploaded";

                }
            }
            else
            {
                lblError1.Visible = true;
                lblError1.Text = "Check image extension";
            }
        }
    }

Step 5:

Run Your Website.

Note: Don't forget to add namespace using System.IO .