改写BlogEngine.NET头像上传实现方式（使用baidu.flash.avatarMaker）

baidu.flash.avatarMaker

需要资源文件和javascript类库：

1 2 3 4 5 6 7

需要应用的script library: <scriptsrc="@Url.Content("~/Areas/Admin/Scripts/baidu/tangram-custom-full-yui.js")"></script> <scriptsrc="@Url.Content("~/Areas/Admin/Scripts/baidu/flash.js")"></script> <scriptsrc="@Url.Content("~/Areas/Admin/Scripts/baidu/flash/_Base.js")"></script> <scriptsrc="@Url.Content("~/Areas/Admin/Scripts/baidu/flash/avatarMaker.js")"></script> 需要的使用的资源文件： @Url.Content("~/Areas/Admin/Scripts/baidu/flash/avatarMaker.swf")

HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80

<scriptlanguage='javascript'type='text/javascript'>    var info = baidu.g("fileInfoScope");     /**       * 创建flash based avatarMaker       * param {Object} createOptions 创建flash时需要的参数，请参照baidu.swf.create文档       * config {Object} vars 创建avatarMaker时所需要的参数       * config {String} [vars.locale] 地区,现在支持vi、th、ar三种，分别是越南语、泰语和阿拉伯语，当使用阿拉伯语时，界面会变成rtl形式,默认为[zh-cn]       * config {String} [vars.bigFileName] 80*80图片文件数据字段名，默认为'bigFile'       * config {String} [vars.middleFileName] 60*60图片文件数据字段名，默认为'middleFile'       * config {String} [vars.smallFileName] 60*60图片文件数据字段名，默认为'smallFile'       * config {Number} [vars.imageQuality] 图片的压缩质量0-100， 默认为 80       * config {String} uploadURL 上传图片到的url地址       * config {Function|String} tipHandler js提示函数，当flash发生异常，调用此函数显示出错信息。该函数接收一个String类型的参数，为需要显示的文字        * config {Function|String} uploadCallBack 上传之后的回调函数       */     var options = {         vars: {             locale: 'zh-cn',             bigFileName: 'bigFileName',             middleFileName: 'middleFileName',             smallFileName: 'smallFileName',             imageQuality: 100         },         uploadURL: "@Url.Action("UploadAvatar", "Users", new { Area = "Admin", id = ViewBag.theId })",         tipHandle: function (tip) {             alert(tip);         },         uploadCallBack: function (data) {             data = JSON.parse(data);             // 处理完毕后的操作。例如 window.location ='xxxxx/xxxxx';             // alert("头像更换成功。");             if (data.Success) {                 ShowStatus("success", data.Message);             }             else {                 ShowStatus("warning", data.Message);             }         },         createOptions: {             id: "flashID", url: "@Url.Content("~/Areas/Admin/Scripts/baidu/flash/avatarMaker.swf")", width: "630px", height: "360px", container: "fileContentScope"         }     };     var t = function () {         var d = new Date();         return [d.getHours(), d.getMinutes(), d.getSeconds()].join(":")     };     var up;     function clll() { up.upload(); }     var LoadProfile = function () {         var dto = { "id": "@ViewBag.theId" };         $.ajax({             url: "@Url.Action("GetProfile", "Users", new { Area = "Admin" })",             data: ko.toJSON(dto),             type: "POST",             contentType: "application/json; charset=utf-8",             dataType: "json",             beforeSend: onAjaxBeforeSend,             success: function (msg) {                 $('#Container').setTemplateURL(SiteVars.TemplatesFilePath + '/profile.htm', null, { filter_data: false });                 $('#Container').processTemplate(msg.Data);                 $("#hiddenUploadButton").hide();                 up = new baidu.flash.avatarMaker(options);                 $("#hiddenUploadButton").show();                 $('#Container2').setTemplateURL(SiteVars.TemplatesFilePath + '/profile2.htm', null, { filter_data: false });                 $('#Container2').processTemplate(msg.Data);                 $(".rowTools").accessibleDropDown();             }         });     };     LoadProfile(); </script> <divid="fileContentScope"style="width: 630px; height: 360px; padding: 10px; display: block; border: 1px solid #ddd;"> </div> <divid="fileInfoScope"style="width: 630px; height: auto; line-height: 20px; border: 1px solid #ddd; border-top: 0px; font-size: 12px; padding: 10px;">                     <pstyle="color: #666">                         图片说明：<br/>                         每次上传的文件覆盖前面的文件。上传后的路径为: ~/upload/<br/>                         以字母b结尾的为大图（130x130 像素），以字母m结尾的为中图（55x55像素），以s结尾的为小图（35x35像素）</p>                     <inputid="hiddenUploadButton"type="button"value="上传"onclick="clll()"/>   </div>

c#代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

public JsonResult UploadAvatar(string id) {             JsonResponse jsonData = new JsonResponse();             jsonData.Success = false;                string login = string.IsNullOrEmpty(id) ? Security.CurrentUser.Identity.Name : id;             string theFileName = "middleFileName";                try {                 for (int i = 0; i < Request.Files.Count; i++) {                     // the upload file name                                            string fileName = Request.Files.Get(i).FileName;                     if (string.Compare(fileName, theFileName, true) != 0) {                         continue;                     }                        fileName = string.Concat(fileName, ".png");                                         //~/App_Data/files/avatars/Primary/admin/                     string fileSaveDirectory = string.Concat(BlogConfig.StorageLocation, "files/avatars", "/", Blog.CurrentInstance.Name, "/", login);                     //~/App_Data/files/avatars/Primary/admin/middleFileName                     string fileSavePath = string.Concat(fileSaveDirectory,"/", fileName);                        // ensure the diectory exists                     if (!BlogService.DirectoryExists(@fileSaveDirectory)) {                         BlogService.CreateDirectory(@fileSaveDirectory);                     }                        // case the file path has exist just delete it.                     if (BlogService.FileExists(@fileSavePath)) {                         BlogService.DeleteFile(@fileSavePath);                     }                        // upload file                      BlogService.UploadFile(Request.Files.Get(i).InputStream, fileName, BlogService.GetDirectory(fileSaveDirectory), true);                  }                                     var pf = AuthorProfile.GetProfile(login) ?? new AuthorProfile(login);                 // /Images/avatars/Primary/admin//middleFileName.png                 pf.PhotoUrl = string.Join("/", new string[] { Blog.CurrentInstance.Name, login, string.Concat(theFileName, ".png") });                 pf.Save();                    jsonData.Success = true;                 jsonData.Message = "上传文件成功！";             }             catch (Exception ex) {                 LogUtil.Log(string.Concat(DateTime.Now.ToString(), ex.Message));                 jsonData.Success = false;                 jsonData.Message = "上传文件失败！";             }                return Json(jsonData);         }

本文看点：

1. 看了BlogEngine.NET中的实现代码显然是没有使用BlogEngine.Core中提供的文件资源类库，本示例：提供了使用BlogEngine.Core文件资源库使用方法。

2. 使用了baidu.flash.avatarMaker类库实现了在ASP.NET mvc中，实现图片截取，上传功能。

领悟：

1. baidu的脚本现在做的很强大呀，特别是他的百度地图功能中的脚本相当有水平呀。

2. 读开源程序，别人的思想真的让人感慨很多，比如：BlogEngine.Core中的文件资源库，功能实现的接口方法提供XML,UC,DB几种实现，可谓之功能强大了，接口类的命名实在是佩服，感觉像是在用Directory和File类一样。

希望给读者们提供更多帮助。

参考资源：

http://www.cnblogs.com/snake-hand/archive/2013/06/14/3136997.html[但感觉本文中,提到的一些资源也很致命呀，c#代码接收文件地方的文件名错误；需要的资源库讲的不全]

https://github.com/BaiduFE/Tangram-component  Tangram-component

http://tangram.baidu.com/   Tangram官网