一、介紹：圖片的上傳直接使用ajax就可以了，截取圖片的話使用到Jcrop插件，
圖片上傳資料：https://www.jb51.net/article/87654.htm
截取圖片插件：http://code.ciaoca.com/jquery/jcrop/
前端
添加參考
1 <script src="../js/jquery.min.js"></script> 2 <link href="../Css/jquery.Jcrop.min.css" rel="stylesheet" /> 3 <script src="../js/jquery.Jcrop.min.js"></script>
HTML代碼
1 <input type="file" name="photo" id="photo" value="" placeholder="免冠照片"> 2 <input type="button" onclick="postData();" value="下一步" name="" style="width: 100px; height: 30px;"> 3 <img id="showPhoto" />
JavaScript代碼
1 <script type="text/javascript"> 2 //檔案上傳方法 3 function postData() { 4 var formData = https://www.cnblogs.com/birdGe/p/new FormData(); 5 //上傳檔案的變數名 6 formData.append("Filedata", $("#photo")[0].files[0]); 7 $.ajax({ 8 url: "/ashx/upload.ashx?action=upload", /*介面域名地址*/ 9 type: 'post', 10 data: formData, 11 contentType: false, 12 processData: false, 13 success: function (res) { 14 $("#showPhoto").attr("src", res); 15 CutPhoto(); 16 } 17 }) 18 } 19 //截圖 20 function CutPhoto() { 21 var jcropApi; 22 $('#showPhoto').Jcrop({ 23 //選框選定時的事件 24 onSelect: function (c) { 25 $.ajax({ 26 url: "/ashx/upload.ashx?action=cut", 27 type: "post", 28 data: { 29 "x": c.x, 30 "y": c.y, 31 "width": c.w, 32 "height": c.h, 33 "imgSrc": $("#showPhoto").attr("src") 34 }, 35 success: function () { 36 37 } 38 }); 39 }, 40 allowSelect: true,//允許新選框 41 baseClass: 'jcrop' 42 }, function () { 43 jcropApi = this; 44 }); 45 } 46 </script>
后臺
添加一個一般處理程式upload.ashx
代碼
1 public class upload : IHttpHandler 2 { 3 4 public void ProcessRequest(HttpContext context) 5 { 6 context.Response.ContentType = "text/plain"; 7 //判斷action 8 string action = context.Request["action"]; 9 if (action == "upload") 10 { 11 Upload(context); 12 } 13 else if (action == "cut") 14 { 15 CutPhoto(context); 16 } 17 } 18 19 public bool IsReusable 20 { 21 get 22 { 23 return false; 24 } 25 } 26 /// <summary> 27 /// 檔案上傳 28 /// </summary> 29 private void Upload(HttpContext context) 30 { 31 //獲取檔案 32 HttpPostedFile file = context.Request.Files["Filedata"]; 33 //判斷檔案是否為空 34 if (file != null) 35 { 36 //獲取檔案名 37 string fileName = Path.GetFileName(file.FileName); 38 //獲取檔案擴展名 39 string fileExt = Path.GetExtension(fileName); 40 //判斷檔案擴展名是否正確 41 if (fileExt == ".jpg") 42 { 43 //獲得檔案路徑 44 string filePath = "/UploadFile/" + DateTime.Now.Year + DateTime.Now.Month + DateTime.Now.Day; 45 //判斷檔案是否存在 46 if (!System.IO.Directory.Exists(context.Request.MapPath(filePath))) 47 { 48 //不存在則創建 49 Directory.CreateDirectory(context.Request.MapPath(filePath)); 50 } 51 //生成新的檔案名 52 string newFileName = filePath + "/" + Guid.NewGuid() + fileExt; 53 //保存檔案 54 file.SaveAs(context.Request.MapPath(newFileName)); 55 //回傳檔案路徑 56 context.Response.Write(newFileName); 57 } 58 } 59 } 60 /// <summary> 61 /// 截取圖片 62 /// </summary> 63 /// <param name="context"></param> 64 private void CutPhoto(HttpContext context) 65 { 66 int x = Convert.ToInt32(context.Request["x"]); 67 int y = Convert.ToInt32(context.Request["x"]); 68 int width = Convert.ToInt32(context.Request["width"]); 69 int height = Convert.ToInt32(context.Request["height"]); 70 string imgSrc = https://www.cnblogs.com/birdGe/p/context.Request["imgSrc"]; 71 //創建畫布 72 using (Bitmap bitmap = new Bitmap(width, height)) 73 { 74 //創建畫筆 75 using (Graphics g = Graphics.FromImage(bitmap)) 76 { 77 //創建圖片 78 using (Image img = Image.FromFile(context.Request.MapPath(imgSrc))) 79 { 80 //截取圖片 81 //第一個引數：要畫的圖片 82 //第二個引數：畫多大 83 //第三個引數：畫圖片的哪個部分 84 g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel); 85 string newImgName = Guid.NewGuid().ToString()+".jpg"; 86 string dir = "/UploadFile/" + newImgName; 87 bitmap.Save(context.Request.MapPath(dir),System.Drawing.Imaging.ImageFormat.Jpeg); 88 } 89 } 90 } 91 } 92 }
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/4453.html
標籤：ASP.NET
上一篇：制作縮略圖、遠程縮略圖