使用技术：Asp.net MVC与jquery.uploadify,Jcrop

首先上页面

01 <strong><!DOCTYPE html>
02  <html>
03  <head>
04      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
05      <title>Index</title>
06      <link href="http://www.cnblogs.com/CSS/base.css" rel="stylesheet" type="text/css"/>
07      <script src="http://www.cnblogs.com/Js/jquery-1.7.1.min.js"type="text/javascript"></script>
08      <script src="http://www.cnblogs.com/Js/uploadify/swfobject.js"type="text/javascript"></script>
09      <script src="http://www.cnblogs.com/Js/uploadify/jquery.uploadify.v2.1.4.min.js"type="text/javascript"></script>
10      <link href="http://www.cnblogs.com/Js/uploadify/uploadify.css" rel="stylesheet"type="text/css" />
11      <script src="http://www.cnblogs.com/Js/crop/jquery.Jcrop.min.js"type="text/javascript"></script>
12      <link href="http://www.cnblogs.com/Js/crop/jquery.Jcrop.css" rel="stylesheet"type="text/css" />
13      <style type="text/css">
14  /* 上传按钮 */
15          #uploadifyUploader
16  {
17              margin-top: 235px;
18  }
19  /* 加载条 */
20          .uploadifyQueueItem
21  {
22              margin: 0 auto;
23  }
24          #img-up
25  {
26              width: 700px;
27              height: 500px;
28              background-color: #e8f0f6;
29              text-align: center;
30  }
31          #img-prev-container
32  {
33              width: 200px;
34              height: 200px;
35              overflow: hidden;
36              clear: both;
37  }
38          #img-crop
39  {
40              display: none;
41  }
42  </style>
43  </head>
44  <body>
45      <div id="img-up">
46          <input type="file" id="uploadify" name="uploadify" />
47          <div id="fileQueue">
48          </div>
49      </div>
50      <div id="img-crop">
51          <div id="img-prev-container">
52              <img id="img-preview" />
53          </div>
54          <img id="img-uploadify" />
55          <form action="/Crop/tryCrop" method="post">
56          <input type="hidden" name="x" id="x" />
57          <input type="hidden" name="y" id="y" />
58          <input type="hidden" name="w" id="w" />
59          <input type="hidden" name="h" id="h" />
60          <input type="hidden" name="img" id="img" />
61          <input type="submit" value="剪裁" />
62          </form>
63      </div>
64  </body>
65  </html></strong>

JS

01 <script type="text/javascript">
02      $(function () {
03          var jcrop_api, boundx, boundy;
04   
05          function updateCoords(c) {
06              $('#x').val(c.x);
07              $('#y').val(c.y);
08              $('#w').val(c.w);
09              $('#h').val(c.h);
10          };
11          function updatePreview(c) {
12              if (parseInt(c.w) > 0) {
13                  /* 商必须与img-preview宽高一致 */
14                  var rx = 200 / c.w;
15                  var ry = 200 / c.h;
16   
17                  $('#img-preview').css({
18                      width: Math.round(rx * boundx) + 'px',
19                      height: Math.round(ry * boundy) + 'px',
20                      marginLeft: '-' + Math.round(rx * c.x) + 'px',
21                      marginTop: '-' + Math.round(ry * c.y) + 'px'
22                  });
23              }
24          };
25   
26          $("#uploadify").uploadify({
27              'uploader': 'http://www.cnblogs.com/Js/uploadify/uploadify.swf',
28              'script': '/Crop/upload',
29              'cancelImg': 'http://www.cnblogs.com/Js/uploadify/cancel.png',
30              'folder': 'Images',
31              'queueID': 'fileQueue',
32              'auto': true,
33              'buttonText': 'upload image',
34              'queueSizeLimit': 1,
35              'multi': false,
36              'fileDesc': 'jpg,gif',
37              'fileExt': '*.jpg;*.gif',
38              'sizeLimit': '819200',
39              'onComplete': function (event, queueID, fileObj, response, data) {
40                  var result = eval('(' + response + ')');
41                  if ('0' == result.id) {
42                      $('#img-up').remove();
43                      $('#img-crop').css("display", "block");
44                      /* 绑定图片名称 */
45                      variname = (result.mess).substring((result.mess).lastIndexOf("/") + 1, (result.mess).length);
46                      $('#img').val(iname);
47                      /* 加载原始图片 */
48                      $('#img-preview,#img-uploadify').attr("src", result.mess);
49                      /* 加载剪裁插件 */
50                      $('#img-uploadify').Jcrop({
51                          onChange: updatePreview,
52                          onSelect: updatePreview,
53                          aspectRatio: 1,
54                          onSelect: updateCoords,
55                          setSelect: [0, 0, 200, 200]
56                      }, function () {
57                          var bounds = this.getBounds();
58                          boundx = bounds[0];
59                          boundy = bounds[1];
60                          jcrop_api = this;
61                      });
62                  } else if ('1' == result.id) {
63                      /* 异常信息提示 */
64                      alert(result.mess)
65                  }
66              }
67          });
68      });   
69  </script>
01 public class CropController : Controller
02      {
03          public ActionResult Index()
04          {
05              return View();
06          }
07   
08          [HttpPost]
09          public ActionResult upload(HttpPostedFileBase Filedata)
10          {
11              try
12              {
13                  Image image = Image.FromStream(Filedata.InputStream);
14                  stringipath = Path.Combine("Images", Path.GetFileName(Filedata.FileName));
15                  string spath = Path.Combine(HttpContext.Server.MapPath("~"), ipath);
16                  image.Save(spath);
17   
18                  return Json(new{ id = "0", mess = string.Format("{0}{1}/{2}", BaseUrl, "Images", Filedata.FileName), iw = image.Width, ih = image.Height });
19              }
20              catch (Exception ex)
21              {
22                  return Json(new { id = "1", mess = ex.Message });
23              }
24          }
25   
26          public void tryCrop(string img, int x, int y, int w, int h)
27          {
28              Image image = Image.FromFile(Path.Combine(HttpContext.Server.MapPath("~"), "Images", img));
29              Crop(image, w, h, x, y).Save(Path.Combine(HttpContext.Server.MapPath("~"), "Images", "v"+ img));
30   
31              Response.Redirect(string.Format("{0}{1}/{2}", BaseUrl, "Images", "v"+ img));
32          }
33   
34          [NonAction]
35          public string BaseUrl
36          {
37              get
38              {
39                 return Request.Url.Scheme + "://"+ Request.Url.Authority + Request.ApplicationPath.TrimEnd('/') + '/';
40              }
41          }
42   
43          [NonAction]
44          public static Image Crop(Image image, int width, int height, int x, int y)
45          {
46              Bitmap bmp = new Bitmap(width, height, PixelFormat.Format24bppRgb);
47              bmp.SetResolution(image.HorizontalResolution, image.VerticalResolution);
48   
49              using (Graphics graphic = Graphics.FromImage(bmp))
50              {
51                  graphic.SmoothingMode = SmoothingMode.AntiAlias;
52                  graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
53                  graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
54                  graphic.DrawImage(image, newRectangle(0, 0, width, height), x, y, width, height, GraphicsUnit.Pixel);
55              }
56   
57              return bmp;
58          }
59      }

转自：http://www.cnblogs.com/yoer/archive/2012/02/18/asp_net_mvc_image_upload_crop.html

Asp.net MVC 实现图片上传剪切的更多相关文章

  1. 简单2步实现 asp.net mvc ckeditor 图片上传

    1.打开ckeditor 包下的  config.js,添加一句 配置(PS:ckeditor 很多功能都在该配置文件里配置),如下: config.filebrowserImageUploadUrl ...

  2. c# ASP.NET MVC easyui-filebox 图片上传和显示

    原文:https://www.cnblogs.com/huatao/p/4727398.html https://www.cnblogs.com/weiweithe/p/4363458.html 表单 ...

  3. MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】（八） ASP.NET MVC 图片上传到服务器

    MVC图片上传.浏览.删除   1.存储配置信息 在web.config中,添加配置信息节点 <appSettings> <add key="UploadPath" ...

  4. ASP.NET MVC+LayUI视频上传

    前言: 前段时间在使用APS.NET MVC+LayUI做视频上传功能的时,发现当上传一些内存比较大的视频就会提示上传失败,后来通过查阅相关资料发现.NET MVC框架为考虑安全问题,在运行时对请求的 ...

  5. Asp.net mvc 大文件上传 断点续传

    Asp.net mvc 大文件上传 断点续传 进度条   概述 项目中需要一个上传200M-500M的文件大小的功能,需要断点续传.上传性能稳定.突破asp.net上传限制.一开始看到51CTO上的这 ...

  6. 探索Asp.net mvc 的文件上传

    (转自:http://www.cnblogs.com/n-pei/archive/2010/10/15/1852635.html) 最近因为TeamVideo需要用到视频和图片上传功能,所以试着Goo ...

  7. 探索Asp.net mvc 的文件上传(由浅入深)

    代码下载:http://files.cnblogs.com/n-pei/mvcfileupload.zip 最近因为TeamVideo需要用到视频和图片上传功能,所以试着Google了很多资料,和大家 ...

  8. ASP.NET MVC HttpPostedFileBase文件上传

    HttpPostedFileBase文件上传,支持多文件一次上传,如有图片,则支持略缩图保存 文件传输信息封装 /// <summary> /// 文件生成方式 /// </summ ...

  9. Mvc 批量图片上传

    首先导入文件(官网上下载 kindeditor ): <link href="~/kindeditor-4.1.11-zh-CN/kindeditor/themes/default/d ...

随机推荐

  1. SQL Server 基础：拾遗

    1.一条完整的sql语句: select top | distinct 字段, 表达式, 函数, ... from 表表达式 where 筛选条件 group by 分组条件 having 筛选条件 ...

  2. Jquery制作可以绑定的表格

    //总页数 当前页 可见页 参数 翻页执行后处理的函数 function PageTable(totalPages, currentPage, tableobj, url, where, column ...

  3. iOS反射机制

    iOS属性反射:说白了,就是将两个对象的所有属性,用动态的方式取出来,并根据属性名,自动绑值.(注意:对象的类,如果是派生类,就得靠其他方式来实现了,因为得到不该基类的属性.) 本人常用的反射方式,有 ...

  4. linux 使用 pyodbc 访问 ms sqlserver 数据库

    一.安装linux下Sqlserver的驱动程序: 我们先来安装SqlServer的驱动程序,再安装ODBC相关的,目的是想尽快可以进行测试,因为在安装完Freetds之后,我们马上就可以在linux ...

  5. android Init 相关分析

    Init.c主要工作 1. 初始化属性(包括建立/dev./proc等目录.初始化属性.log.执行init.rc等初始化文件中的action等). 2. 解析配置文件的命令(主要是init.rc文件 ...

  6. sharepoint 2010 误删除AD组用户不能访问

    不小心误操作把ad中的组删除了,在sharepoint中是通过组给的权限,在ad中新建了一个同样名的组给了权限组下面的用户还是不能访问. 解决方法: 在sharepoint中把这组从网站集中删除,重新 ...

  7. sharepoint 浏览页面导航不正确

    问题是这样的: sharepoint网站上建立一个二级站点,然后在网站中创建几个页面.当浏览二级网站的页面的时候,顶部导航的位置总是在首页的地方,而不是我的二级站点的导航位置. 解决方法: 转到网站集 ...

  8. 【PHP】iOS推送通知以及反馈服务

    近来项目是完成一个PHP的推送服务器,无论是PHP,APNs还是GCM基本上都是从零开始. 写下一点见解,方便以后继续做代码的搬运工. 因为对PHP跟iOS都不熟悉,可能有错漏...穷孩子没有用过iO ...

  9. ios coreData使用

    ios中的coredata的使用(转) 分类: ios2013-07-15 18:12 27288人阅读 评论(1) 收藏 举报 Core Data数据持久化是对SQLite的一个升级,它是ios集成 ...

  10. 如何把bootstrap用webpack打包

    今天下载了一个anguarl2写后台,一直没有找到是如何使用bootstrap样式的,然后就全文做了搜索,发现有一段代码 import 'bootstrap-loader'; 这段代码很可疑,所以就查 ...