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. 图解HTTP看书体会（1）

    MAC地址和IP地址的区别与联系 一.IP地址 对于IP地址,相信大家都很熟悉,即指使用TCP/IP协议指定给主机的32位地址.IP地址由用点分隔开的4个8八位组构成,如192.168.0.1就是一个 ...

  2. Linux 守护进程二（激活守护进程）

    //守护进程--读文件 #include <stdio.h> #include <stdlib.h> #include <string.h> #include &l ...

  3. Web API 实现JSONP或者安装配置Cors跨域

    前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想 ...

  4. 安装Ubuntu 16.04后要做的事

    Ubuntu 16.04发布了,带来了很多新特性,同样也依然带着很多不习惯的东西,所以装完系统后还要进行一系列的优化. 1.删除libreoffice libreoffice虽然是开源的,但是Java ...

  5. 微信小程序全选，微信小程序checkbox，微信小程序购物车

    微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组  1.标题titl ...

  6. java数据类型总结

    java8大基本数据类型: 整型: byte 字节型     1字节   数据范围:-27   ~  27- 1  即:-128 ~ 127 short 短整型    2字节 数据范围:-215 ~ ...

  7. 初识Groovy

    Groovy是一种基于JVM(Java虚拟机)的敏捷开发语言,它结合了Python.Ruby和Smalltalk的许多强大的特性,Groovy 代码能够与 Java 代码很好地结合,也能用于扩展现有代 ...

  8. 怎样开发单页面app

    groot.view("myview", function (vm, ve) { ve.loada = function () { require("./app/page ...

  9. canvas粒子demo

    之前在codepen上看到了类似的效果,于是自己也使用coffee-script写了个相似的demo 效果:http://whxaxes.github.io/canvas-test/src/Parti ...

  10. php 接收表单 方法的区别

    在php中用于接收表单数据的方法有$_REQUEST.$_POST和$_GET.他们作用都是类似的,下面来看一下他们的区别. 一.$_REQUEST能够用于接收post与get方法提交的数据,但是$_ ...