富头像编辑器的使用

 

 <script src="~/Content/jquery-1.9.1.min.js"></script>

    <script src="~/Content/UploadPic/logoupload/swfobject.js"></script>
    <script src="~/Content/UploadPic/logoupload/fullAvatarEditor.js"></script>
    <!-----注意 在用此插件时出现问题，导致效果出不来
      正确方法是在此给出swf文件的路径，
       var swf = new fullAvatarEditor("/Content/UploadPic/logoupload/fullAvatarEditor.swf", "/Content/UploadPic/logoupload/expressInstall.swf"
        但是改路径找不到，所以暂时修改fullAvatarEditor.js文件中files，给出指定的文件路径

        -->

布局部分

    <div style="width:630px;margin: 0 auto;">
        <h1 style="text-align:center">富头像上传编辑器演示</h1>
        <div>
         
            <p id="swfContainer">
            
            </p>
        </div>
        <button id="upload">上传</button>
    </div>

script部分

   <script type="text/javascript">
        swfobject.addDomLoadEvent(function () {
            var swf = new fullAvatarEditor("/Content/UploadPic/logoupload/fullAvatarEditor.swf", "/Content/UploadPic/logoupload/expressInstall.swf", "swfContainer", {
                //此处的swfContainer是容器的id
                id: 'swf',
                upload_url: '@Url.Action("Upload")',
                //avatar_sizes: "290*150",
                //avatar_sizes_desc: "290*150像素", 
                src_upload: 2,//是否上传原图片的选项，有以下值：    0 ---不上传 1 ---上传 2 ---显示复选框由用户选择
                tab_visible:false,//是否显示选项卡
                //browse_box_border_color:"#000",//图片选择框的边框颜色。格式如：#888，#888888
                //browse_box_align:"center",
                src_size: "2MB",//选择的本地图片文件所允许的最大值，必须带单位，如888Byte，88KB，8MB
                browse_button: "上传图片",//选择图片时的按钮文本
                //avatar_intro_font:"裁剪后图片",
                isShowUploadResultIcon: true,//在上传完成时（无论成功和失败），是否显示表示上传结果的图标。
                src_size_over_limit: '文件大小超出限制（2MB）\n请重新上传',
            }, function (msg) {
                switch (msg.code) {
                    case 1: document.title="页面成功加载了组件！"; break;
                    case 2: document.title="已成功加载默认指定的图片到编辑面板。"; break;
                    case 3:
                        if (msg.type == 0) {
                            document.title = "摄像头已准备就绪且用户已允许使用。";
                        }
                        else if (msg.type == 1) {
                            document.title="摄像头已准备就绪但用户未允许使用！";
                        }
                        else {
                            document.title = "摄像头被占用！";
                        }
                        break;
                    case 5:
                        if (msg.type == 0) {
                            if (msg.content.sourceUrl) {
                                document.title = "原图已成功保存至服务器，url为：\n" + msg.content.sourceUrl;
                            }
                            document.title = "头像已成功保存至服务器，url为：\n" + msg.content.avatarUrls.join("\n");
                        }
                        break;
                }
            }
            );
       
        });


    </script>

后台方法

 public ActionResult Upload() {
            Result result = new Result();
            result.avatarUrls = new ArrayList();
            result.success = false;
            result.msg = "Failure!";
            //取服务器时间+8位随机码作为部分文件名，确保文件名无重复。
            string fileName = DateTime.Now.ToString("yyyyMMddhhmmssff") + CreateRandomCode(8);
       
            //定义一个变量用以储存当前头像的序号
            int avatarNumber = 1;
            string url = "~/Admin/Upload/";
            //遍历所有文件域
            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 = "";
                    //判断是是否有该文件夹
                    if (!Directory.Exists(Server.MapPath(url)))
                        Directory.CreateDirectory(Server.MapPath(url));//创建文件夹
                    virtualPath = url + fileName +avatarNumber+ ".jpg";
                    //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);
        }


      
        /// <summary>
        /// 生成指定长度的随机码。
        /// </summary>
        private 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();
        }




        /// <summary>
        /// 表示图片的上传结果。
        /// </summary>
        private struct Result
        {
            /// <summary>
            /// 表示图片是否已上传成功。
            /// </summary>
            public bool success;
            /// <summary>
            /// 自定义的附加消息。
            /// </summary>
            public string msg;
            /// <summary>
            /// 表示原始图片的保存地址。
            /// </summary>
            public string sourceUrl;
            /// <summary>
            /// 表示所有头像图片的保存地址，该变量为一个数组。
            /// </summary>
            public ArrayList avatarUrls;
        }