一、介绍：图片的上传直接使用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 }