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的配置的更多相关文章

  1. .net mvc4 利用 kindeditor 上传本地图片

    http://blog.csdn.net/ycwol/article/details/41824371?utm_source=tuicool&utm_medium=referral 最近在用k ...

  2. kindeditor上传本地图片实例

    所需插件:kindeditor下载   密码: 5ry4 jsp文件: <script type="text/javascript" language="javas ...

  3. tinymce4.x 上传本地图片(自己写个插件)

    tinymce是一款挺不错的html文本编辑器.但是添加图片是直接添加链接,不能直接选择本地图片. 下面我写了一个插件用于直接上传本地图片. 在tinymce的plugins目录下新建一个upload ...

  4. tinymce4.x 上传本地图片 （转载）

    转载自:http://www.cnblogs.com/fhen/p/5809514.html tinymce4.x 上传本地图片   tinymce是一款挺不错的html文本编辑器.但是添加图片是直接 ...

  5. 个人永久性免费-Excel催化剂功能第102波-批量上传本地图片至网络图床（外网可访问）

    自我突破,在100+功能后,再做有质量的功能,非常不易,相对录制视频这些轻松活,还是按捺不住去写代码,此功能虽小,但功课也做了不少,希望对真正有需要的群体带来一些惊喜. 背景介绍 图床的使用,一般是写 ...

  6. html5上传本地图片,在线预览及裁剪(filereader,canvas)

    1 我们常常需要上传头像,点击上传按钮时候需要预览一下,使用filereader方法无需和后台交互,代码如下: //本地图片在上传之前的预览效果 //图片上传预览 function previewIm ...

  7. 有道云笔记Markdown上传本地图片的方法

    有道云笔记截图&保存   方法有多种,例如:开通有道云笔记VIP会员.先将图片文件上传到有道云笔记后使用图片的分享链接.说到底还是使用的 Markdown 的图片功能 ![图片名称](图片链接 ...

  8. js上传本地图片遇到的问题

    1.改变页面文件上传默认的样式 <input type="text" size="20" id="upfile" style=&quo ...

  9. 图片上传-本地图片转base64+ie8支持+本地预览支持

    最近项目由于flash同学没在了,图片上传只能前端重新做,后台希望用base64数据上传,复用之前接口 问题来了, 1.ie8 不支持canvas转base64 2.本地预览 base64数据,ie8 ...

随机推荐

  1. Mac快捷键、命令行

    睡眠:option + command + 电源键  立即关机:Cmd-Opt-Ctrl-Eject 立即重启:Cmd-Ctrl-Eject 弹出关机提示 :Ctrl + 关机 正常关机快捷键 : C ...

  2. JS原生父子页面操作

    var api = frameElement.api;  //当前 W = api.opener;//父页面 W.setPerSel(jsonStr); api.close(); //关闭窗口 js操 ...

  3. REST签名认证

    139 开放平台与应用之间以REST协议进行通讯,为了保证通信的安全性,开放平台加入签名认证机制.应用一旦创建,系统生成唯一并且不公开的secretkey,只有应用的拥有者和开放平台知道.因此,当应用 ...

  4. [Android] 【视频】黑马安卓62、66期等教程+源码

     下载地址:http://fu83.cn/thread-58-1-1.html

  5. GEOS库的学习之二:简单几何图形的创建

    几何图形(Geometry)是geos里面基本的操作对象,因此Geometry类就是最重要的一个类 几何图形中主要有三个要素:点,线,面.横纵坐标构成点,多个点构成线,环线构成面,点线面混合构成几何集 ...

  6. [CareerCup] 6.5 Drop Eggs 扔鸡蛋问题

    6.5 There is a building of 100 floors. If an egg drops from the Nth floor or above, it will break. I ...

  7. 信息安全系统设计基础实验五：简单嵌入式 WEB 服务器实验 （20135229,20135234）

    http://www.cnblogs.com/mqy123/p/5002683.html

  8. 深入理解计算机系统家庭作业汇总 20135301&&20135328

    深入理解计算机系统家庭作业 深入理解计算机系统第二章家庭作业 题目2.64 题目要求 判断二进制数偶数位是否有任意一位位为1,有的话返回1,否则返回0 解题过程 int any_even_one(un ...

  9. 软件工程(QLGY2015)第二次作业点评（随机挑选20组点评）

    相关博文目录: 第一次作业点评 第二次作业点评 第三次作业点评 说明:随机挑选20组点评,大家可以看看blog名字,github项目名字,看看那种是更好的,可以学习,每个小组都会反应出一些问题,希望能 ...

  10. HDU5336-XYZ and Drops-模拟

    模拟水珠那个游戏. 小水珠超过边界会消失. 会有两个水珠同时到达一个size=4大水珠的情况.要移动完统一爆炸 #include <vector> #include <cstdio& ...