码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-01-19 20:59:07      阅读:385      评论:0      收藏:0      [点我收藏+]

标签:

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

 

源代码:下载

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

标签:

原文地址:http://www.cnblogs.com/zkwarrior/p/5143270.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!