ASP. NET MVC upload avatar plus clipping feature

Original: ASP. NET MVC upload Avatar plus clipping function

Just the project with the Upload + cut function, sent up for later use.

I can not tell you are actually from the blog Garden Grilled front desk code, haha.

The front end is jquery+fineuploader+jquery. Jcrop

Background is ASP. NET MVC 4

The core JS calling code is crop.js and the helper folder under the ImgHandler.cs

Front Code

<Linkhref= "~/content/fineuploader.css"rel= "stylesheet" /><Linkhref= "~/content/jquery." Jcrop.min.css "rel= "stylesheet" /><Linkhref= "~/content/crop.min.css"rel= "stylesheet" /><Scriptsrc= "~/scripts/jquery-1.8.2.min.js"></Script><Scriptsrc= "~/scripts/jquery.fineuploader-3.1.min.js"></Script><Scriptsrc= "~/scripts/jquery." Jcrop.min.js "></Script><Scriptsrc= "~/scripts/crop.js"></Script><DivID= "Jquery-wrapped-fine-uploader"></Div>    <DivID= "message"></Div>    <DivID= "Crop_wrap">        <DivID= "Crop_holder">            <DivID= "Crop_area"class= "Border">                <imgID= "Crop_image"alt=""src=""class= "Preview-image"style= "Display:none" />            </Div>            <DivID= "Preview_area">                <DivID= "Preview_title">Current Avatar</Div>                <DivID= "Preview_large_text"class= "Preview-text">180pxx180px</Div>                <DivID= "Preview_large_wrap"class= "Border">                    <imgID= "Preview_large"alt=""src= "@ViewBag. Path"class= "Preview-image"style=""/></Div>            </Div>        </Div>        <DivID= "Crop_operation"style= "Display:none;">            <formID= "Form_crop"Action= "/home/index"Method= "POST">                <inputtype= "hidden"name= "X"ID= "X">                <inputtype= "hidden"name= "Y"ID= "Y">                <inputtype= "hidden"name= "W"ID= "W">                <inputtype= "hidden"name= "H"ID= "H">                <inputtype= "hidden"name= "Imgsrc"ID= "Imgsrc">                <inputID= "Crop_operation_submit"type= "Submit"value= "Crop and save" /><spanID= "Crop_operation_msg"style= "Display:none"class= "Green"></span>            </form>        </Div>        <DivID= "Croped_message"class= "Green"></Div>    </Div>

Background code

         PublicActionResult Index () {returnView (); }        /// <summary>        ///Save thumbnail image/// </summary>        /// <param name= "form" ></param>        /// <returns></returns>[HttpPost] Publicactionresult Index (formcollection form) {intx = Convert.ToInt32 (form["x"]); inty = Convert.ToInt32 (form["y"]); intW = Convert.ToInt32 (form["W"]); inth = Convert.ToInt32 (form["h"]); stringIMGSRC = form["imgsrc"]. Substring (0, form["imgsrc"]. LastIndexOf ("?")); stringPath =Imghandler.cutavatar (imgsrc, X, Y, W, h); //Save PathViewbag.path=path; returnView (); }        /// <summary>        ///Upload Avatar/// </summary>        /// <param name= "Qqfile" ></param>        /// <returns></returns>[HttpPost] PublicActionResult Processupload (stringqqfile) {            Try            {                stringUploadfolder ="/upload/original/"+ DateTime.Now.ToString ("yyyymm") +"/"; stringImgname = DateTime.Now.ToString ("DDHHMMSSFF"); stringImgtype = Qqfile. Substring (Qqfile. LastIndexOf (".")); stringUploadpath =""; Uploadpath=Server.MapPath (Uploadfolder); if(!directory.exists (Uploadpath))                {directory.createdirectory (Uploadpath); }                using(varInputStream =request.inputstream) {using(varFliestream =NewFileStream (Uploadpath + imgname +Imgtype, FileMode.Create))                    {Inputstream.copyto (Fliestream); }                }                returnJson (New{success =true, message = Uploadfolder + Imgname +Imgtype}); }            Catch(Exception e) {returnJson (New{fail =true, message =e.message}); }        }

Code is not complete, here is the source: download