ASP.NET图片上传和截取

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

一、介绍：图片的上传直接使用ajax就可以了，截取图片的话使用到Jcrop插件。

　　图片上传资料：https://www.ogeek.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     }