富頭像編輯器是一個很好的頭像圖片上傳控件，能夠對圖片進行簡單的處理，例如：剪切、調節亮度等功能；富頭像編輯器擁有很的參數配置，可根據自己的需要配置控件的功能；該控件要求瀏覽器需安裝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); } 接收參數的一個類： using System; using System.Collections; using System.Collections.Generic; using System.Linq; using System.Text; using System.Web; namespace MvcApplication1.Models { public class Result { /// <summary> /// 表示圖片是否已上傳成功。 /// </summary> public bool success; /// <summary> /// 自定義的附加消息。 /// </summary> public string msg; /// <summary> /// 表示原始圖片的保存地址。 /// </summary> public string sourceUrl; /// <summary> /// 表示所有頭像圖片的保存地址，該變量為一個數組。 /// </summary> public ArrayList avatarUrls; } public class HelpClass { /// <summary> /// 生成指定長度的隨機碼。 /// </summary> public static string CreateRandomCode(int length) { string[] codes = new string[36] { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z" }; StringBuilder randomCode = new StringBuilder(); Random rand = new Random(); for (int i = 0; i < length; i++) { randomCode.Append(codes[rand.Next(codes.Length)]); } return randomCode.ToString(); } } }
3.下面是運行后的效果圖
