ASP.NET圖片上傳和截取

一、介紹：圖片的上傳直接使用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 = 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 = 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     }