Asp.net?mvc實(shí)現(xiàn)上傳頭像加剪裁功能
在我們使用QQ上傳頭像,注冊(cè)用戶(hù)賬號(hào)時(shí)是不是都會(huì)遇到上傳圖像,并根據(jù)自己的要求對(duì)圖像進(jìn)行裁剪,這是怎么實(shí)現(xiàn)的吶?
本文主要介紹了Asp.net mvc實(shí)現(xiàn)上傳頭像加剪裁功能,分享給大家供大家參考。具體如下:
運(yùn)行效果截圖如下:
具體代碼如下:
前臺(tái)代碼
<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"> <img id="crop_image" alt="" src="" class="preview-image" style="display: none" /> </div> <div id="preview_area"> <div id="preview_title">當(dāng)前頭像</div> <div id="preview_large_text" class="preview-text">180px × 180px</div> <div id="preview_large_wrap" class="border"> <img id="preview_large" alt="" src="@ViewBag.Path" class="preview-image" style=""/></div> </div> </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="裁切并保存" /><span id="crop_operation_msg" style="display: none" class="green"></span> </form> </div> <div id="croped_message" class="green"></div> </div>
后臺(tái)代碼
public ActionResult Index() { return View(); } /// <summary> /// 保存縮略圖 /// </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["imgsrc"].LastIndexOf("?")); string path = ImgHandler.CutAvatar(imgsrc, x, y, w, h); //保存Path ViewBag.Path = path; return View(); } /// <summary> /// 上傳頭像 /// </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("ddHHmmssff"); 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 }); } }
以上就是實(shí)現(xiàn)Asp.net mvc上傳頭像加剪裁功能的部分代碼,小編分享給大家參考,希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
VS2019中.NET如何實(shí)現(xiàn)打日志功能
本文主要介紹了VS2019中.NET如何實(shí)現(xiàn)打日志功能,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03VS2017 Cordova Ionic2 移動(dòng)開(kāi)發(fā)環(huán)境搭建教程
這篇文章主要為大家詳細(xì)介紹了VS2017 Cordova Ionic2 移動(dòng)開(kāi)發(fā)環(huán)境搭建教程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04.Net MVC實(shí)現(xiàn)長(zhǎng)輪詢(xún)
這篇文章主要為大家詳細(xì)介紹了.Net MVC實(shí)現(xiàn)長(zhǎng)輪詢(xún)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06HTML服務(wù)器控件和WEB服務(wù)器控件的區(qū)別和聯(lián)系介紹
學(xué)習(xí)asp.net的時(shí)候一會(huì)用Html服務(wù)器控件,一會(huì)用Web服務(wù)器控件,起初做起例子來(lái)也挺迷糊的,下面對(duì)這兩個(gè)控件研究了一下做個(gè)筆記在此與大家分享下,感興趣的朋友可以了解下2013-08-08asp.net中CSharpThinking擴(kuò)展方法分析
這篇文章主要介紹了asp.net中CSharpThinking擴(kuò)展方法,實(shí)例講述了擴(kuò)展方法的特征及應(yīng)用,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-11-11asp.net基于JWT的web api身份驗(yàn)證及跨域調(diào)用實(shí)踐
這篇文章主要介紹了asp.net基于JWT的web api身份驗(yàn)證及跨域調(diào)用實(shí)踐,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07asp.net下生成英文字符數(shù)字驗(yàn)證碼的代碼
用了asp.net隨機(jī)數(shù),獲取指定位數(shù)的字母或數(shù)字以后,進(jìn)行圖片輸出的驗(yàn)證碼函數(shù)。2009-12-12asp.net程序優(yōu)化 盡量減少數(shù)據(jù)庫(kù)連接操作
最近做一個(gè)項(xiàng)目,做的比較郁悶,現(xiàn)在把項(xiàng)目經(jīng)驗(yàn)總結(jié)在這里。項(xiàng)目的主要功能就是為第三方程序提供數(shù)據(jù),并根據(jù)客戶(hù)端的調(diào)用提供數(shù)據(jù)更新。我的程序?qū)儆诜?wù)端。服務(wù)端以站點(diǎn)形式部署,以Xml的數(shù)據(jù)格式輸出2012-05-05