首先介紹SWFUpload組件
SWFUpload是一個客戶端文件上傳工具，最初由Vinterwebb.se開發，它通過整合Flash與JavaScript技術
爲WEB開發者提供了一個具有豐富功能繼而超越傳統<input type="file" />標籤的文件上傳模式。
好了，不說廢話直接看代碼
Js代碼
1 var swfu; 2 window.onload = function () { 3 swfu = new SWFUpload({ 4 // Backend Settings 5 upload_url: "/Image/upload", //提交上傳的url 6 post_params: { 7 "ASPSESSID": "@Session.SessionID" //SessionID很重要，如果沒有SessionID將無法上傳，並且加載頁面時Button都不會顯示 8 }, 9 // 上傳文件設置 10 file_size_limit: "2 MB", //大小 11 file_types: "*.jpg",//格式 12 file_types_description: "JPG Images", 13 file_upload_limit: 0, // Zero means unlimited 14 //一系列事件 默認事件在Handler.js文件內 15 swfupload_preload_handler: preLoad, 16 swfupload_load_failed_handler: loadFailed, 17 file_queue_error_handler: fileQueueError, 18 file_dialog_complete_handler: fileDialogComplete, 19 upload_progress_handler: uploadProgress,//上傳過程 20 upload_error_handler: uploadError,//上傳異常 21 upload_success_handler: cutImage, //上傳成功 22 upload_complete_handler: uploadComplete, 23 // Button樣式相關設置 24 button_image_url: '@Url.Content("~/Content/js/swfuploadv250/images/XPButtonNoText_160x22.png")', 25 button_placeholder_id: "spanButtonPlaceholder",//Button按鈕ID 26 button_width: 160, 27 button_height: 22, 28 button_text: '<span class="button">上傳圖片 <span class="buttonSmall">(2 MB Max)</span></span>', 29 button_text_style: '.button { font-family: Helvetica, Arial, sans-serif;color:red; font-size: 14pt; } .buttonSmall { font-size: 10pt; }', 30 button_text_top_padding: 1, 31 button_text_left_padding: 5, 32 // Flash文件(swfupload.swf) 路徑設置 33 flash_url: '@Url.Content("~/Content/js/swfuploadv250/swfupload.swf")', 34 flash9_url: '@Url.Content("~/Content/js/swfuploadv250/swfupload_fp9.swf")', 35 custom_settings: { 36 upload_target: "divFileProgressContainer" //展示信息框 的id 37 }, 38 // 是否開啓調試 39 debug: false 40 });
Html
1 <body> 2 <div id="content"> 3 aaabbb 4 <div id="swfu_container" style="margin: 0px 10px;"> 5 <div> 6 <span id="spanButtonPlaceholder"></span> 7 </div> 8 <div id="divFileProgressContainer" style="height: 75px;"></div> 9 <div id="thumbnails"></div> 10 </div> 11 </div> 12 <div id="divImg" style="position:relative;overflow:hidden"> 13 <div id="divCut" class="easyui-draggable" style="border:1px solid red;width:226px;height:198px;" data-options="onDrag:onDrag"></div> 14 </div> 15 <input type="button" value="頭像截取" id="btnCut" /> 16 <img id="cutImg" /> 17 </body>
這時候頁面效果
點擊上傳圖片效果
控制器方法
1 public ActionResult Upload() 2 { 3 //獲得上傳數據 4 HttpPostedFileBase jpeg_image_upload = Request.Files["Filedata"]; 5 //保存圖片 6 string path = "../Images/temp.jpg"; 7 jpeg_image_upload.SaveAs(Request.MapPath(path)); 8 //獲取圖片大小 9 UploadImage.Models.ImageViewData imgViewModel = new Models.ImageViewData(); 10 //取得上傳圖片流 11 using (System.Drawing.Image original_image = System.Drawing.Image.FromStream(jpeg_image_upload.InputStream)) 12 { 13 imgViewModel.Path = path; 14 imgViewModel.Width = original_image.Width; 15 imgViewModel.Height = original_image.Height; 16 } 17 return Json(imgViewModel, JsonRequestBehavior.AllowGet); 18 }
Upload_success_handler:事件方法
主要步驟
1.根據服務端圖片數據 設置用來顯示圖片div的背景src 和 大 小
2.保存src地址
1 //上傳成功事件方法 上傳相關信息 服務端返回的數據 2 function cutImage(file, serverData) { 3 var oJson = JSON.parse(serverData); 4 $("#divImg").css("backgroundImage", "url(" + oJson.Path + ")").css("width", oJson.Width + "px").css("height", oJson.Height + "px"); 5 imgUrl = oJson.Path; 6 } 7 var imgUrl = "";
這是回調函數裏的file參數信息，能用到的比較少。
creationdate: Wed Apr 09 2014 15:17:50 GMT+0800 (中國標準時間)
filestatus: -4
id: "SWFUpload_0_0"
index: 0
modificationdate: Thu Feb 27 2014 11:37:30 GMT+0800 (中國標準時間)
name: "1e6b388f8a513a5d6464f0b722e663aa.jpg"
post: Object
size: 101205
type: ".jpg"
uploadtype: 0
__proto__: Object
拖動用到了easyui的draggable組件
如圖
再次發送ajax請求給服務端（這次不需要用到swfupload組件）
只需要把選取框相對背景圖的 x 和y軸 以及選取框的寬高即可
1 //截圖圖片 2 $("#btnCut").click(function () { 3 var $cut = $("#divCut"); 4 var $divImg = $("#divImg"); 5 var x = $cut.offset().left-$divImg.offset().left; //橫座標 6 var y = $cut.offset().top-$divImg.offset().left;//縱座標 7 var width = $cut.width();//寬度 8 var height = $cut.height();//高度 9 //發送數據到服務端 10 $.post("/Image/ImageCut", { "x": parseInt(x), "y": parseInt(y), "width": parseInt(width), "height": parseInt(height), "imgUrl": imgUrl }, 11 function (data) { 12 13 $("#divImg").hide(); 14 $("#cutImg").attr("src", data); 15 }) 16 })
服務端代碼
1 public ActionResult ImageCut(FormCollection form) 2 { 3 //1:接受參數 4 int x = int.Parse(form["x"]); 5 int y = int.Parse(form["y"]); 6 int width = int.Parse(form["width"]); 7 int height = int.Parse(form["height"]); 8 string imgUrl = form["imgUrl"]; 9 string imgPath = string.Empty; 10 using (Bitmap map = new Bitmap(width, height))//創建圖片的大小與要截取圖像的大小一致 11 { 12 using (Graphics g = Graphics.FromImage(map)) 13 { 14 //將之前上傳的圖片轉成Image 15 using (Image img = Image.FromFile(Request.MapPath(imgUrl))) 16 { 17 // 操作的圖， 要畫大小， 畫哪一塊， 度量單位 18 g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel); 19 imgPath = "../Images/cuttemp.jpg"; 20 map.Save(Request.MapPath(imgPath));//將BitMap保存 21 } 22 } 23 } 24 return Content(imgPath); 25 }