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     }