富头像上传编辑器----很好用的上传照片和拍照功能

2021-07-01 12:03

阅读：498

YPE html>

标签：客户端 images .com .text over scripts == ica time

富头像编辑器是一个很好的头像图片上传控件，能够对图片进行简单的处理，例如：剪切、调节亮度等功能；富头像编辑器拥有很的参数配置，可根据自己的需要配置控件的功能；该控件要求浏览器需安装Flash Player后才能使用；下面是我做的一个小的Demo以说明富头像编辑器的使用方法。

1.前台页面

　　需引用js文件和初始化富头像编辑器，脚本代码如下：

"utf-8" />
    Simple demo"width: 800px; margin: 0 auto;">
        "text-align: center">富头像上传编辑器演示
        
            "swfContainer">
                本组件需要安装Flash Player后才可使用，请从
                    "http://www.adobe.com/go/getflashplayer">这里
                下载安装。
            
        

        @* *@

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 )
{
randomCode.Append(codes[rand.Next(codes.Length)]);
}
return randomCode.ToString();
}
}
}