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 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格式
源代码：下载