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);
}
|
本文看点:
看了BlogEngine.NET中的实现代码显然是没有使用BlogEngine.Core中提供的文件资源类库,本示例:提供了使用BlogEngine.Core文件资源库使用方法。
使用了baidu.flash.avatarMaker类库实现了在ASP.NET mvc中,实现图片截取,上传功能。
领悟:
baidu的脚本现在做的很强大呀,特别是他的百度地图功能中的脚本相当有水平呀。
读开源程序,别人的思想真的让人感慨很多,比如: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官网