mvc中上传头像及裁剪（AjaxFileUploader+cropzoom）

@{ ViewBag.Title = "修改头像"; Layout = "~/Views/Shared/QncMasterPage.cshtml"; } <link href="/Resources/Css/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" /> <link href="/Resources/Css/jquery.cropzoom.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/Resources/Scripts/ajaxfileupload.js"></script> <script src="/Resources/Scripts/jquery-ui-1.8.2.custom.js" type="text/javascript"></script> <script src="/Resources/Scripts/jquery.cropzoom.js" type="text/javascript"></script> <style type="text/css"> .buttons { width: 150px; } .send_data, .restore_data { border: 1px solid #FFF; float: left; padding: 5px; width: auto; height: 20px; background: #333; color: #FFF; margin: 10px 0 0 5px; } .send_data:hover, .restore_data:hover { background: #FFF; color: #333; border: 1px solid #333; cursor: pointer; } .images { width: 750px; } #cropzoom_container { float: left; } .result { float: left; margin: 0 0 0 0px; border: 0px solid #333; width: 300px; height: 300px; text-align:center; padding-top:20px; } .txt { width: 230px; margin: 75px auto 0 auto; } </style> <script type="text/javascript"> var isImg = false; var LoadPic = function (picPath) { var cropzoom = $('#cropzoom_container').cropzoom({ width: 360, height: 300, bgColor: '#CCC', enableRotation: true, enableZoom: true, selector: { w: 150, h: 120, centered: true, borderColor: 'Red', borderColorHover: 'yellow' }, image: { source: picPath, width: 500, height: 500, minZoom: 10, maxZoom: 150 } }); var account = '@Session["UserAccount"].ToString()'; $("#btnSave").click(function () { cropzoom.send('/Ashx/ProcessImage.ashx', 'POST', { act: account }, function (imgRet) { $("#generated").attr("src", imgRet).show(); $("#Hidden_NewImg").val(imgRet); $("#headForm").submit(); }); }); $("#btnPreview").click(function () { if (!isImg) { alert("请先选择图片"); return; } cropzoom.send('/Ashx/ProcessImage.ashx', 'POST', { ID: 11, act: account }, function (imgRet) { $("#generated").attr("src", imgRet).show(); }); }); isImg = true; } function ajaxFileUpload() { // $("#loading") // .ajaxStart(function () { // $(this).show(); // }) // .ajaxComplete(function () { // $(this).hide(); // }); $.ajaxFileUpload ( { url: '/Ashx/UploadHeadImg.ashx', secureuri: false, fileElementId: 'fileToUpload', dataType: 'text', data: { account: '@Session["UserAccount"].ToString()' }, success: function (data, status) { var jsonstr = eval("(" + data + ")"); var filePath = jsonstr[0].filePath; LoadPic(filePath); }, error: function (data, status, e) { alert(e); } } ) return false; } </script> <!-- 上传图片 --> <div class="head_lm mt10"> <div class="images"> <div id="cropzoom_container"></div> <div class="result"><img id="generated" src="" style="display:none" /></div> <div style="clear:both;"></div> </div> <div class="head_lmb mt10"> <input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"> <button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">上传头像</button> <input type="button" value="预览" class="sb_btnbg sb_btn" id="btnPreview"/> <form method="post" id="headForm"> <input type="hidden" name="Hidden_NewImg" id="Hidden_NewImg" /> <input type="button" id="btnSave" class="sb_btnbg sb_btn" value="保存头像" /> </form> </div> </div> <!-- 上传图片 end -->