• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文解决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格式

 

源代码:下载

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
ASP.NET发布网站解决方案发布时间:2022-07-10
下一篇:
[转]ASP.NETMVC实现POST方式的Redirect发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap