网站首页技术博客
web开发经验——富头像上传编辑器的使用——fullavatareditor
摘要富头像编辑器是一个很好的头像图片上传控件,能够对图片进行简单的处理,例如:剪切、调节亮度等功能;富头像编辑器拥有很的参数配置,可根据自己的需要配置控件的功能;该控件要求浏览器需安装Flash Player后才能使用;下面是我做的一个小的Demo以说明富头像编辑器的使用方法。
富头像编辑器是一个很好的头像图片上传控件,能够对图片进行简单的处理,例如:剪切、调节亮度等功能;富头像编辑器拥有很的参数配置,可根据自己的需要配置控件的功能;该控件要求浏览器需安装Flash Player后才能使用;下面是我做的一个小的Demo以说明富头像编辑器的使用方法。
1.前台页面
需引用js文件和初始化富头像编辑器,脚本代码如下:
Simple demo 富头像上传编辑器演示
@* *@本组件需要安装Flash Player后才可使用,请从 这里 下载安装。
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 { ////// 表示图片是否已上传成功。 /// public bool success; ////// 自定义的附加消息。 /// public string msg; ////// 表示原始图片的保存地址。 /// public string sourceUrl; ////// 表示所有头像图片的保存地址,该变量为一个数组。 /// public ArrayList avatarUrls; } public class HelpClass { ////// 生成指定长度的随机码。 /// 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.下面是运行后的效果图