Asp.net MVC 实现图片上传剪切
嘿嘿，这是本人第一篇博文，请大家多多指教。
使用技术：Asp.net MVC与jquery.uploadify,Jcrop
首先上页面
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 <title>Index</title>
6 <link href="http://www.cnblogs.com/CSS/base.css" rel="stylesheet" type="text/css" />
7 <script src="http://www.cnblogs.com/Js/jquery-1.7.1.min.js" type="text/javascript"></script>
8 <script src="http://www.cnblogs.com/Js/uploadify/swfobject.js" type="text/javascript"></script>
9 <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>
JS
1 <script type="text/javascript">
2 $(function () {
3 var jcrop_api, boundx, boundy;
4
5 function updateCoords(c) {
6 $('#x').val(c.x);
7 $('#y').val(c.y);
8 $('#w').val(c.w);
9 $('#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.roun
补充：Web开发 , ASP.Net ,
