<input type="button" id="btnCroped" value="Crop and Upload" />

<link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/ImgaeCropper/cropper.css" rel="stylesheet" /> <link href="~/Content/ImgaeCropper/main.css" rel="stylesheet" /> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/bootstrap.js"></script> <script src="~/Content/ImgaeCropper/cropper.js"></script> <script src="~/Content/ImgaeCropper/main.js"></script> <script> $(document).ready(function () { $('#FileUpload1').change(function () { $('#Image1').hide(); var reader = new FileReader(); reader.onload = function (e) { $('#Image1').show(); $('#Image1').attr("src", e.target.result); $('.container > img').cropper({ aspectRatio: 16 / 9, autoCropArea: 0.65, strict: false, guides: false, highlight: false, dragCrop: false, cropBoxMovable: true, cropBoxResizable: false }); } reader.readAsDataURL($(this)[0].files[0]); }); $('#btnCroped').on('click', function () { debugger; $('.container > img').cropper('crop'); $('.container > img').cropper('getCroppedCanvas').toBlob(function (blob) { var formData = new FormData(); formData.append('croppedImage', blob); debugger; $.ajax({ url: '/Home/Upl', method: "POST", data: formData, processData: false, contentType: false, success: function () { console.log('Upload success'); }, error: function () { console.log('Upload error'); } }); }); }); }); </script> [HttpPost] public ActionResult Upl() { HttpPostedFileBase newImage = Request.Files["croppedImage"]; var folder =System.Web.HttpContext.Current.Server.MapPath("~/Uploads/"); if (!Directory.Exists(folder)) { Directory.CreateDirectory(folder); } var getExt = Path.GetExtension(newImage.FileName).ToLower(); var picName = Guid.NewGuid() + newImage.FileName; newImage.SaveAs(folder + picName); return View(); }