改写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官网

你可能感兴趣的:(Engine)