Introduction :
             Hi, Here i will code you how to Preview and Crop the image before uploading.works 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 :
<html>
<head id="Head1" runat="server">
    <title>Fourthbottle.com</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></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) {
                    $('#previewzone').attr('src', e.target.result);
                    $('#previewzone').Jcrop({
                        onSelect: Coordinates
                    });
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $(document).ready(function () {
            $("#UploadFile").change(function () {
                readURL(this);
            });
        });
        function Coordinates(p) {
            $('#XCoordinate').val(p.x);
            $('#YCoordinate').val(p.y);
            $('#Height').val(p.h);
            $('#Width').val(p.w);
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <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" />
        </div>
        <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" />
    </div>
    </form>
</body>

</html>

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");
            btmap.Save(cropedImagePath);
            cropedImage.Visible = true;
            cropedImage.ImageUrl = "~/Images/oops.jpg";
            Button1.Visible = false;
        }
    }
}