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格式
源代码:下载
相关阅读 更多 +