KindEditor上传本地图片在ASP.NET MVC的配置

本文解决KindEditor上传本地图片在ASP.NET MVC中的配置。

• 开发工具：VS 2010 EN
• 开发语言：Visual C#
• ASP.NET MVC 2.0
• kindeditor-3.5-zh_CN 下载

文中以Blog文章为例，为做演示，数据表比较简单，如下图：

添加 BlogController

Code:

    public class BlogController : Controller
    {
        BlogContainer blogContainer = new BlogContainer();

        //
        // GET: /Blog/

        public ActionResult Index()
        {
            return View(blogContainer.Blogs);
        }

        //
        // GET: /Blog/Details/5

        public ActionResult Details(int id)
        {
            var blog = blogContainer.Blogs.SingleOrDefault(b => b.Id == id);

            return View(blog);
        }

        //
        // GET: /Blog/Create

        public ActionResult Create()
        {
            return View();
        }

        //
        // POST: /Blog/Create

        [HttpPost]
        [ValidateInput(false)]
        public ActionResult Create(Blog blog)
        {
            try
            {
                // TODO: Add insert logic here
                if (ModelState.IsValid)
                {
                    blogContainer.AddToBlogs(blog);
                    blogContainer.SaveChanges();
                }

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        //
        // GET: /Blog/Edit/5

        public ActionResult Edit(int id)
        {
            var blog = blogContainer.Blogs.SingleOrDefault(b => b.Id == id);

            return View(blog);
        }

        //
        // POST: /Blog/Edit/5

        [HttpPost]
        [ValidateInput(false)]
        public ActionResult Edit(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add update logic here
                if (ModelState.IsValid)
                {
                    var blog = blogContainer.Blogs.SingleOrDefault(b => b.Id == id);
                    UpdateModel(blog, collection);
                    blogContainer.SaveChanges();

                    return RedirectToAction("Index");
                }
                else
                {
                    return View();
                }
            }
            catch
            {
                return View();
            }
        }

        //
        // GET: /Blog/Delete/5

        public ActionResult Delete(int id)
        {
            var blog = blogContainer.Blogs.SingleOrDefault(b => b.Id == id);
            blogContainer.Blogs.DeleteObject(blog);
            blogContainer.SaveChanges();

            return RedirectToAction("Index");
        }

        //
        // POST: /Blog/Delete/5

        [HttpPost]
        public ActionResult Delete(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add delete logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        [HttpPost]
        public ActionResult UploadImage()
        {
            string savePath = "../Content/Images/";
            string saveUrl = "http://www.cnblogs.com/Content/Images/";
            string fileTypes = "gif,jpg,jpeg,png,bmp";
            int maxSize = 1000000;

            Hashtable hash = new Hashtable();

            HttpPostedFileBase file = Request.Files["imgFile"];
            if (file == null)
            {
                hash = new Hashtable();
                hash["error"] = 0;
                hash["url"] = "请选择文件";
                return Json(hash);
            }

            string dirPath = Server.MapPath(savePath);
            if (!Directory.Exists(dirPath))
            {
                hash = new Hashtable();
                hash["error"] = 0;
                hash["url"] = "上传目录不存在";
                return Json(hash);
            }

            string fileName = file.FileName;
            string fileExt = Path.GetExtension(fileName).ToLower();

            ArrayList fileTypeList = ArrayList.Adapter(fileTypes.Split(','));

            if (file.InputStream == null || file.InputStream.Length > maxSize)
            {
                hash = new Hashtable();
                hash["error"] = 0;
                hash["url"] = "上传文件大小超过限制";
                return Json(hash);
            }

            if (string.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1)
            {
                hash = new Hashtable();
                hash["error"] = 0;
                hash["url"] = "上传文件扩展名是不允许的扩展名";
                return Json(hash);
            }

            string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
            string filePath = dirPath + newFileName;
            file.SaveAs(filePath);
            string fileUrl = saveUrl + newFileName;

            hash = new Hashtable();
            hash["error"] = 0;
            hash["url"] = fileUrl;

            return Json(hash, "text/html;charset=UTF-8");;
        }
    }

在Create.aspx中添加 KindEditor的引用

 

    <script src="http://www.cnblogs.com/Scripts/KindEditor/kindeditor.js" charset="utf-8" type="text/javascript"></script>
    <script type="text/javascript">
        KE.show({
            id: 'editor',
            imageUploadJson: '/Blog/UploadImage'
        });
    </script>

• id：对应textarea id
• imageUploadJson：提供上传图片的处理程序，这里指向 Blog中的UploadImage

表单内容如下：

 

<% using (Html.BeginForm())
       {%>
    <%: Html.ValidationSummary(true) %>
    <fieldset>
        <legend>Fields</legend>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Title) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Title) %>
            <%: Html.ValidationMessageFor(model => model.Title) %>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Content) %>
        </div>
        <div class="editor-field">
            <%: Html.TextAreaFor(model => model.Content, new { id="editor",rows="15",cols="85"})%>
            <%: Html.ValidationMessageFor(model => model.Content) %>
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
    <% } %>
    <div>
        <%: Html.ActionLink("Back to List", "Index") %>
    </div>

 

以上实现方法参考官方包中的upload_json.ashx实现，关键在 Json格式

 

源代码：下载