標籤：style blog http color java 使用 os 檔案
富頭像編輯器是一個很好的頭像圖片上傳控制項，能夠對圖片進行簡單的處理，例如：剪下、調節亮度等功能；富頭像編輯器擁有很的參數配置，可根據自己的需要配置控制項的功能；該控制項要求瀏覽器需安裝Flash Player後才能使用；下面是我做的一個小的Demo以說明富頭像編輯器的使用方法。
1.前台頁面
需引用js檔案和初始化富頭像編輯器，指令碼代碼如下：
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Simple demo</title> <script src="~/Scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="/swfobject/swfobject.js"></script> <script type="text/javascript" src="/swfobject/fullAvatarEditor.js"></script></head><body> <div style="width: 800px; margin: 0 auto;"> <h1 style="text-align: center">富頭像上傳編輯器示範</h1> <div> <p id="swfContainer"> 本組件需要安裝Flash Player後才可使用，請從 <a href="http://www.adobe.com/go/getflashplayer">這裡</a> 下載安裝。 </p> </div> @* <button type="button" id="upload">自訂上傳按鈕</button>*@ </div> <script type="text/javascript"> //控制項參數參考：http://www.fullavatareditor.com/api.html#usage swfobject.addDomLoadEvent(function () { var swf = new fullAvatarEditor("swfContainer", { id: ‘swf‘, upload_url: ‘/Home/UploadAction‘, // src_url: "/samplePictures/Default.jpg",//預設載入的原圖片的url src_upload: 2,//預設為0；是否上傳原圖片的選項，有以下值：0:不上傳；1:上傳；2 :顯示複選框由使用者選擇 isShowUploadResultIcon: false,//在上傳完成時（無論成功和失敗），是否顯示表示上傳結果的表徵圖 src_size: "2MB",//選擇的本地圖片檔案所允許的最大值，必須帶單位，如888Byte，88KB，8MB src_size_over_limit: "檔案大小超出2MB，請重新選擇圖片。",//當選擇的原圖片檔案的大小超出指定最大值時的提示文本。可使用預留位置{0}表示選擇的原圖片檔案的大小。 src_box_width: "300",//原圖編輯框的寬度 src_box_height: "300",//原圖編輯框的高度 tab_visible: false,//是否顯示選項卡* browse_box_width: "300",//圖片選擇框的寬度 browse_box_height: "300",//圖片選擇框的高度 avatar_sizes: "200*200",//100*100|50*50|32*32,表示一組或多組頭像的尺寸。其間用"|"號分隔。 }, function (msg) { switch (msg.code) { // case 1: alert("頁面成功載入了組件！"); break; // case 2: alert("已成功載入預設指定的圖片到編輯面板。"); break; case 3: if (msg.type == 0) { alert("網路攝影機已準備就緒且使用者已允許使用。"); } else if (msg.type == 1) { alert("網路攝影機已準備就緒但使用者未允許使用！"); } else { alert("網路攝影機被佔用！"); } break; case 5: if (msg.type == 0) { if (msg.content.sourceUrl) { alert("原圖片已成功儲存至伺服器，url為：\n" + msg.content.sourceUrl); } alert("頭像已成功儲存至伺服器，url為：\n" + msg.content.avatarUrls.join("\n")); } break; } } ); document.getElementById("upload").onclick = function () { swf.call("upload"); }; }); </script></body></html>
2.後台代碼
後台是對提交過來的檔案進行儲存處理並返回相應的結果，代碼如下：
public ActionResult UploadAction() { Result result = new Result(); result.avatarUrls = new ArrayList(); result.success = false; result.msg = "Failure!"; //取伺服器時間+8位隨機碼作為部分檔案名稱，確保檔案名稱無重複。 string fileName = DateTime.Now.ToString("yyyyMMddhhmmssff") + HelpClass.CreateRandomCode(8); //定義一個變數用以儲存當前頭像的序號 int avatarNumber = 1; //遍曆所有檔案域 foreach (string fieldName in Request.Files.AllKeys) { HttpPostedFileBase file = Request.Files[fieldName]; //原始圖片(file 域的名稱：__source，如果用戶端定義可以上傳的話，可在此處理）。 if (fieldName == "__source") { result.sourceUrl = string.Format("/upload/csharp_source_{0}.jpg", fileName); file.SaveAs(Server.MapPath(result.sourceUrl)); } //頭像圖片(file 域的名稱：__avatar1,2,3...)。 else { string virtualPath = string.Format("/upload/csharp_avatar{0}_{1}.jpg", avatarNumber, fileName); result.avatarUrls.Add(virtualPath); file.SaveAs(Server.MapPath(virtualPath)); avatarNumber++; } } result.success = true; result.msg = "Success!"; //返回圖片的儲存結果（返回內容為json字串，可自行構造，該處使用Newtonsoft.Json構造） // Response.Write(JsonConvert.SerializeObject(result)); return Json(result); }
3.下面是運行後的
關於參數的配置請參考：http://www.fullavatareditor.com/api.html#usage
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
