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

http://www.cnblogs.com/upupto/archive/2010/08/24/1807202.html

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

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

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

添加 BlogController

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184

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格式

 

源代码：下载