三步在mvc中使用KindEditor开发富文本编辑器上传图片功能

　　一.在你的项目中加入KindEditor的js包，再在你的view视力中加入js文件的引用

　　<script charset="utf-8" src="@Url.Content("~/Areas/FXGHDA/Components/kindeditor-4.1.10/kindeditor.js")"></script>
　　<script charset="utf-8" src="@Url.Content("~/Areas/FXGHDA/Components/kindeditor-4.1.10/lang/zh_CN.js")"></script>

　　二.创建KindEditor对象，并设置上传图片的Action地址

 var editor;
 KindEditor.ready(function (K) {
                editor = K.create('#editor_id', {
                    width: '700px',
                    heigth: '450px',
                    uploadJson: '/FXGHDA/KindEdit/UploadImage'
                });
            });

　　三.编写UploadImage后台方法

　　　　string uploadFilePath = System.Configuration.ConfigurationSettings.AppSettings["News"];

        [HttpPost]
        public JsonResult UploadImage(FormCollection form)
        {
            //定义消息
            Hashtable hash = new Hashtable();
            hash["error"] = 1;
            hash["url"] = "";
            if (Request.Files.Count != 0)
            {
                HttpPostedFileBase file = Request.Files[0];
                //最大文件大小
                int maxSize = 10000000;
                //文件名
                String fileName = file.FileName;
                //文件格式
                String fileExt = Path.GetExtension(fileName).ToLower();
                //定义允许上传的文件扩展名
                string[] extArr = new[] { ".gif", ".jpg", ".jpeg", ".png", ".bmp" };
                if (file.InputStream == null || file.InputStream.Length > maxSize)
                {
                    hash["error"] = 1;
                    hash["message"] = "上传文件大小超过限制！";
                }
                else if (String.IsNullOrEmpty(fileExt) || !extArr.Contains(fileExt))
                {
                    hash["error"] = 1;
                    hash["message"] = "上传文件扩展名是不允许的扩展名！";
                }
                else
                {
                    String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
                    string path = Server.MapPath(uploadFilePath);
                    if (!Directory.Exists(path))
                    {
                        Directory.CreateDirectory(path);
                    }
                    String fileUrl = Path.Combine(path, newFileName);
                    file.SaveAs(fileUrl);
                    hash["error"] = 0;
                    hash["url"] = Path.Combine(uploadFilePath, newFileName);
                }
            }
            else
            {
                hash["error"] = 1;
                hash["message"] = "请选择文件！";
            }
            return Json(hash, "text/html;charset=UTF-8");
        }

要注意的几个地方：

1.返回的Json格式要指定为"text/html;charset=UTF-8"，否则在IE下会弹出下载窗口

2.在查看视图的时候，一定要在你的图片路径字段前调用@Html.Raw(Model.picPath)，否则页面上输出的是你保存在数据库的路径字符串，而不会解析成Html代码，也就看不到你上传的图片了

最后来看一下效果吧！