How to validate,upload,crop and store image in folder in asp.net using jQuery

  ASP.NET Projects

Complete ASPX Code:- 

%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
   
    <script src="Scripts/jquery.Jcrop.js" type="text/javascript"></script>
    <link href="CSS/jquery.Jcrop.css" rel="stylesheet" />
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $('#<%=imgToCrop.ClientID%>').Jcrop({
                onSelect: getAreaToCrop
            });
        });
        function getAreaToCrop(c) {
            $('#XCoordinate').val(parseInt(c.x));
            $('#YCoordinate').val(parseInt(c.y));
            $('#Width').val(parseInt(c.w));
            $('#Height').val(parseInt(c.h));
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width: 540px">
        <fieldset>
            <legend>Upload, crop and save image in asp.net</legend>
            <table>
                <tr>
                    <td>
                        Select image to upload :
                    </td>
                    <td>
                        <asp:FileUpload ID="FileUpload1" runat="server" />
                    </td>
                    <td>
                        <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <asp:Image ID="imgCropped" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <asp:Label ID="lblMsg" runat="server" ForeColor="Red" />
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <asp:Button ID="btnReset" runat="server" Text="Reset" Visible="false" OnClick="btnReset_Click" />
                    </td>
                </tr>
            </table>
            <asp:Panel ID="pnlCrop" runat="server" Visible="false">
                <table>
                    <tr>
                        <td>
                            <asp:Image ID="imgToCrop" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button ID="btnCrop" runat="server" Text="Crop & Save" OnClick="btnCrop_Click" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id="XCoordinate" type="hidden" runat="server" />
                            <input id="YCoordinate" type="hidden" runat="server" />
                            <input id="Width" type="hidden" runat="server" />
                            <input id="Height" type="hidden" runat="server" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
        </fieldset>
    </div>
    </form>
</body>
</html>

Complete Code Behind:-

First of all add following namespaces 

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Drawing;

then write the code as: 

 protected void btnUpload_Click(object sender, EventArgs e)
    {
        string fileName = string.Empty;
        string filePath = string.Empty;
        string extension = string.Empty;
        try
        {
            //Check if Fileupload control has file in it
            if (FileUpload1.HasFile)
            {
                // Get selected image extension
                extension = Path.GetExtension(FileUpload1.FileName).ToLower();
                //Check image is of valid type or not
                if (extension == ".jpg" || extension == ".jpeg" || extension == ".png" || extension == ".gif" || extension == ".bmp")
                {
                    //Create unique name for the file
                    fileName = Guid.NewGuid().ToString() + extension;
                    //Create path for the image to store
                    filePath = Path.Combine(Server.MapPath("~/Images"), fileName);
                    //Save image in folder
                    FileUpload1.SaveAs(filePath);
                    //Show the panel and load the uploaded image in image control.
                    pnlCrop.Visible = true;
                    imgToCrop.ImageUrl = "~/Images/" + fileName;
                }
                else
                {
                    lblMsg.Text = "Please select jpg, jpeg, png, gif or bmp file only";
                }
            }
            else
            {
                lblMsg.Text = "Please select file to upload";
            }
        }
        catch (Exception ex)
        {
            lblMsg.Text = "Oops!! error occured : " + ex.Message.ToString();
        }
        finally
        {
            extension = string.Empty;
            fileName = string.Empty;
            filePath = string.Empty;
        }
    }

    protected void btnCrop_Click(object sender, EventArgs e)
    {
        string croppedFileName = string.Empty;
        string croppedFilePath = string.Empty;
        //get uploaded image name
        string fileName = Path.GetFileName(imgToCrop.ImageUrl);
        //get uploaded image path
        string filePath = Path.Combine(Server.MapPath("~/Images"), fileName);

        //Check if file exists on the path i.e. in the UploadedImages folder.
        if (File.Exists(filePath))
        {
            //Get the image from UploadedImages folder.
            System.Drawing.Image orgImg = System.Drawing.Image.FromFile(filePath);
            //Get user selected cropped area
            //Convert.ToInt32(String.Format("{0:0.##}", YCoordinate.Value)),

            Rectangle areaToCrop = new Rectangle(
                Convert.ToInt32(XCoordinate.Value),
                Convert.ToInt32(YCoordinate.Value),
                Convert.ToInt32(Width.Value),
                Convert.ToInt32(Height.Value));
            try
            {

                Bitmap bitMap = new Bitmap(areaToCrop.Width, areaToCrop.Height);
                //Create graphics object for alteration
                using (Graphics g = Graphics.FromImage(bitMap))
                {
                    //Draw image to screen
                    g.DrawImage(orgImg, new Rectangle(0, 0, bitMap.Width, bitMap.Height), areaToCrop, GraphicsUnit.Pixel);
                }

                //name the cropped image
                croppedFileName = "crop_" + fileName;
                //Create path to store the cropped image
                croppedFilePath = Path.Combine(Server.MapPath("~/Images"), croppedFileName);
                //save cropped image in folder
                bitMap.Save(croppedFilePath);
                orgImg.Dispose();
                bitMap = null;
                //Now you can delete the original uploaded image from folder               
                File.Delete(filePath);
                //Hide the panel
                pnlCrop.Visible = false;
                //Show success message in label
                lblMsg.ForeColor = Color.Green;
                lblMsg.Text = "Image cropped and saved successfully";

                //Show cropped image
                imgCropped.ImageUrl = "~/Images/" + croppedFileName;

                //Show Reset button
                btnReset.Visible = true;
            }
            catch (Exception ex)
            {
                lblMsg.Text = "Oops!! error occured : " + ex.Message.ToString();
            }
            finally
            {
                fileName = string.Empty;
                filePath = string.Empty;
                croppedFileName = string.Empty;
                croppedFilePath = string.Empty;
            }
        }

    }

    protected void btnReset_Click(object sender, EventArgs e)
    {
        imgCropped.ImageUrl = "";
        lblMsg.Text = string.Empty;
        btnReset.Visible = false;
    }

 

13,702 thoughts on - How to validate,upload,crop and store image in folder in asp.net using jQuery