Asp.net mvc upload Avatar and cropping Function

The upload + cropping function is used in the project to facilitate future use.

I cannot tell you the front-end code from the blog garden, haha.

The front end is jquery + fineuploader + jquery. Jcrop

The backend is asp.net mvc 4

The core js call code is ImgHandler. cs in the crop. js and helper folders.

Front-end code

<Link href = "~ /Content/fineuploader.css "rel =" stylesheet "/> <link href = "~ /Content/jquery.Jcrop.min.css "rel =" stylesheet "/> <link href = "~ /Content/crop.min.css "rel =" stylesheet "/> <script src = "~ /Scripts/jquery-1.8.2.min.js "> </script> <script src = "~ /Scripts/jquery. fineuploader-3.1.min.js "> </script> <script src = "~ /Scripts/jquery. Jcrop. min. js "> </script> <script src = "~ /Scripts/crop. js "> </script> <div id =" jquery-wrapped-fine-uploader "> </div> <div id =" message "> </div> <div id = "crop_wrap"> <div id = "crop_holder"> <div id = "crop_area" class = "border">  </div> <div id =" preview_area "> <div id =" preview_title "> current profile </div> <div id =" preview_large_text "class =" preview-text "> 180px × 180px </div> <div id =" preview_large_wrap "class =" border ">  </div> <div id =" crop_operation "style =" display: none; "> <form id =" form_crop "action ="/home/index "method =" post "> <input type =" hidden "name =" x "id =" x"> <input type = "hidden" name = "y" id = "y"> <input type = "hidden" name = "w" id = "w"> <input type = "hidden" name = "h" id = "h"> <input type = "hidden" name = "imgsrc" id = "imgsrc"> <input id = "crop_operation_submit" type = "submit" value = "crop and save"/> <span id = "crop_operation_msg" style = "display: none "class =" green "> </span> </form> </div> <div id =" croped_message "class =" green "> </div>

 

Background code

Public ActionResult Index () {return View ();} /// <summary> /// Save the thumbnail /// </summary> /// <param name = "form"> </param> /// <returns> </returns> [HttpPost] public ActionResult Index (FormCollection form) {int x = Convert. toInt32 (form ["x"]); int y = Convert. toInt32 (form ["y"]); int w = Convert. toInt32 (form ["w"]); int h = Convert. toInt32 (form ["h"]); string imgsrc = form ["imgsrc"]. substring (0, form ["imgsr C "]. LastIndexOf ("? "); String path = ImgHandler. cutAvatar (imgsrc, x, y, w, h); // save Path ViewBag. path = path; return View ();} /// <summary> /// upload the Avatar /// </summary> /// <param name = "qqfile"> </param> /// <returns> </returns> [HttpPost] public ActionResult ProcessUpload (string qqfile) {try {string uploadFolder = "/Upload/original/" + DateTime. now. toString ("yyyyMM") + "/"; string imgName = DateTime. now. toString ("ddHHmm Ssff "); string imgType = qqfile. Substring (qqfile. LastIndexOf (". "); string uploadPath =" "; uploadPath = Server. MapPath (uploadFolder); if (! Directory. exists (uploadPath) {Directory. createDirectory (uploadPath);} using (var inputStream = Request. inputStream) {using (var flieStream = new FileStream (uploadPath + imgName + imgType, FileMode. create) {inputStream. copyTo (flieStream) ;}} return Json (new {success = true, message = uploadFolder + imgName + imgType});} catch (Exception e) {return Json (new {fail = true, message = e. message });}}

 

The code is incomplete. Here is the source code: Download