Introduction :
             Hi, Here i will code you how to Preview and Crop the image before in all major browsers. Firstly i have selected the File from fileupload control, and Shown the preview before cropping it.
By using JCROP  Plugin we are selecting the image to crop, By Using C# we are going to crop the Image before uploading.

Logic : While Clicking the 'Crop' button the selected image will be saved in the 'Image' folder, After cropping i will save it as other image and Show in other image tag. Here i am using Four HiddenField's to set the value in JQuery and Retrieving it in C#, Both X and Y coordinates height and Width are saved in Hiddenfields,

ASPX and Jquery Code :
<head id="Head1" runat="server">
    <script type="text/javascript" src=""></script>
    <script src="Scripts/jquery.Jcrop.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        function readURL(input) {

            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                        onSelect: Coordinates
        $(document).ready(function () {
            $("#UploadFile").change(function () {
        function Coordinates(p) {
    <form id="form1" runat="server">
        <asp:FileUpload ID="UploadFile" runat="server" />
        <asp:Image runat="server" ID="previewzone" alt="" />
        <div id="ForFF" style="display: none;">
            <img id="FFImg" alt="your image" />
        <asp:HiddenField ID="XCoordinate" runat="server" />
        <asp:HiddenField ID="YCoordinate" runat="server" />
        <asp:HiddenField ID="Height" runat="server" />
        <asp:HiddenField ID="Width" runat="server" />
        <asp:HiddenField ID="HiddenField1" runat="server" />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Crop" OnClick="Button1_Click" />
        <br />
        <br />
        <asp:Image ID="cropedImage" runat="server" Visible="false" />


Code Behind (C#) :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;
using System.IO;

namespace Image_Preview
    public partial class Page3 : System.Web.UI.Page
        protected void Button1_Click(object sender, EventArgs e)
            string fpath = (Path.GetFullPath(UploadFile.PostedFile.FileName));
            int x = Convert.ToInt32(XCoordinate.Value);
            int y = Convert.ToInt32(YCoordinate.Value);
            int h = Convert.ToInt32(Height.Value);
            int w = Convert.ToInt32(Width.Value);
            UploadFile.SaveAs(Server.MapPath("Images/" + UploadFile.FileName));
            string imagePath = Server.MapPath("Images/" + UploadFile.FileName);
             System.Drawing.Image previewzone = Bitmap.FromFile(imagePath);
            Bitmap btmap = new Bitmap(w, h, previewzone.PixelFormat);
            Graphics graphcs = Graphics.FromImage(btmap);
            graphcs.DrawImage(previewzone, new Rectangle(0, 0, w, h), new Rectangle(x, y, w, h), GraphicsUnit.Pixel);
            Guid name = Guid.NewGuid();
            string cropedImagePath = Server.MapPath("~/Images/oops.jpg");
            cropedImage.Visible = true;
            cropedImage.ImageUrl = "~/Images/oops.jpg";
            Button1.Visible = false;