KindEditor上传本地图片在ASP.NET MVC的配置
时间:2010-08-24 来源:Creative dream
本文解决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格式
源代码:下载
 相关阅读 更多 + 
    
  









