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. 有一家做BPM的公司叫K2，Gartner和IDC都说好！

    有一家公司被Gartner称为成长最快速的BPMS厂商,被IDC称为破坏性创新者… IDC及Gartner均称K2为成长最快速的商务流程管理套装平台(BPMS)厂商.IDC称K2为“破坏性创新者,在关 ...

  2. Contains Duplicate II

    Given an array of integers and an integer k, find out whether there there are two distinct indices i ...

  3. GeoServer 常见问题总结

    Geoserver安装环境 Geoserver在部署发布服务时,经常会遇到如下问题,现总结如下: 1.忘记了GeoServer Web Admin Page的登陆用户名和密码怎么办? 存储位置:C:\ ...

  4. 使用log4j将日志写入数据库并发送邮件

    参考: 快速了解Log4J 1.log4j的初始配置 参考该问的配置即可完整的实现写入数据库及发送邮件的功能 a.写入数据库需要配置相应的jar包,数据库类型不同,请使用指定的数据库配置,该文仅限于o ...

  5. Linux 删除文件夹和文件命令

    inux删除目录很简单,很多人还是习惯用rmdir,不过一旦目录非空,就陷入深深的苦恼之中,现在使用rm -rf命令即可.直接rm就可以了,不过要加两个参数-rf 即:rm -rf 目录名字-r 就是 ...

  6. 在opencv3中利用SVM进行图像目标检测和分类

    采用鼠标事件,手动选择样本点,包括目标样本和背景样本.组成训练数据进行训练 1.主函数 #include "stdafx.h" #include "opencv2/ope ...

  7. 学习Shell脚本编程（第2期）_编写修改权限及执行Shell程序的步骤

    编写Shell程序 执行Shell程序 Shell程序有很多类似C语言和其他程序设计语言的特征,但是又没有程序语言那样复杂.Shell程序是指放在一个文件中的一系列Linux命令和实用程序.在执行的时 ...

  8. Navicat for mysql 显示中文乱码问题

    使用navicat for mysql 打开数据库时,使用Console插入和查询数据显示乱码 处理过程 1.查看数据库编码为" utf8 -- UTF-8 Unicode",也就 ...

  9. java加解密操作过程中的中文乱码问题

    import javax.crypto.Cipher; import javax.crypto.KeyGenerator; import javax.crypto.SecretKey; import ...

  10. WindowsService（Windows服务）开发步骤附Demo

    1.打开VS,新建项目,选择Windows服务,然后设置目录及项目名称后点击确定. 2.展开Service1服务文件,编写service1.cs类文件,不是Service1[设计].然后修改OnSta ...