Implement Asp.net mvc upload Avatar and cropping, asp. netmvc

Implement Asp.net mvc upload Avatar and cropping, asp. netmvc

When we use QQ to upload an avatar, will we always upload images when registering a user account, and crop images according to our own requirements? How can this be achieved?

This article describes how to use Asp.net mvc to upload and crop an avatar and share it with you for your reference. The details are as follows:

The running effect is as follows:

The Code is as follows:

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 above is part of the code for implementing the Asp.net mvc upload Avatar and cropping function. I hope it will be helpful for your learning.