KindEditor编辑器默认上传的图片文件夹,是根据系统时间自动生成的,图片是自动上传到这些文件夹里面,无法选择。如果要上传图片到指定文件夹,像相册一样管理图片,则需要扩展KindEditor编辑器。

一个相册实际上对应的就是一个文件夹,我们可以做一个表格来存放。本例为了简单,就不涉及到数据库了。

一、在控制器(defaultController)里编写action,获取文件夹列表,并序列化为JSON对象。

 public ActionResult album()
{
if (Request.IsAjaxRequest())
{
ArrayList list = new ArrayList();
ArrayList a=new ArrayList(){"生活照","艺术照","精彩瞬间", "旅游"};
foreach (var x in a)
{
Hashtable ht = new Hashtable();
ht.Add("folderName", x);
list.Add(ht);
}
return Json(list, JsonRequestBehavior.AllowGet); }
else
return View(); }

如果是存放在表格里面的,就更简单了,如表格为AlbumFolder(id,folderName),则代码为

    public ActionResult album()
{
if (Request.IsAjaxRequest())
{
var list = db.AlbumFolder.ToList();
return Json(list, JsonRequestBehavior.AllowGet); }
else
return View(); }

二、修改image.js文件

打开目录kindeditor/plugins/image/下的image.js文件,在

clickFn = options.clickFn;

这句代码的后面,添加一些代码,变为

    clickFn = options.clickFn;
$.post('/default/album', function (data) {
$.each(data, function (i, item) {
$("<option></option>").val(item["folderName"]).text(item["folderName"]).appendTo($("#folder"));
});
});

然后找到

'<input type="button" class="ke-upload-button" value="' + lang.upload + '" />',

这个地方,后下面添加

'<label style="width:60px;">上传到:</label>',
'<select name="folder" id="folder"></select>',

三、修改upload_json.ashx文件

打开目录kindeditor/asp.net/下的upload.json.ashx文件,

找到

String ymd = DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo);
dirPath += ymd+"/";
saveUrl += ymd + "/";

这个地方,将之替换成

string  imageFolder = context.Request.Form["folder"];
dirPath += imageFolder+"/";
saveUrl += imageFolder + "/";

大功告成,刷新试试吧!

在MVC3中修改KindEditor实现上传图片到指定文件夹的更多相关文章

  1. [置顶] LOAD语句:利用MSSQL中的xp_cmdshell功能,将指定文件夹下的指定文件,生成mysql的LOAD语句

    LOAD语句:利用MSSQL中的xp_cmdshell功能,将指定文件夹下的指定文件,生成mysql的LOAD语句 declare @sql varchar(4000), @dirpath varch ...

  2. 在MVC3中修改KindEditor实现图片删除

    编辑器KindEditor可以上传图片,但却不能删除图片,因此我们通过修改一些文件,对KindEditor进行扩展,使得KindEditor能删除服务器上的图片. 主要方法就是:在图片空间中浏览图片, ...

  3. 在MVC3或asp.net中修改KindEditor实现上传图片时添加水印

    主要修改两个文件:image.js和upload_json.ashx文件. 一.修改image.js文件 打开kindeditor/plugins/image目录下的image.js文件,找到 '&l ...

  4. mvc中上传图片到指定文件夹中

    前台: @using (Html.BeginForm("AddImg", "UpFileImg", FormMethod.Post, new { enctype ...

  5. .net网站上传图片换电脑不显示 当不用网站的IP地址访问图片,只用相对路径访问时,在发布网站的时候,将上传图片的目标文件夹,包含在项目中再发布即可。

    .net网站上传图片换电脑不显示 当不用网站的IP地址访问图片,只用相对路径访问时,在发布网站的时候,将上传图片的目标文件夹,包含在项目中再发布即可.

  6. 关于 百度 Ueditor 上传图片时 打开文件夹的延迟问题

    在使用 ueditor 开发时, 作为一个web文本编辑器使用时. 当点击上传图片时, 文件夹要延迟好久才能打开. 解决: 针对多图片上传, 将/ueditor/dialogs/image/image ...

  7. 关于 百度 Ueditor (在chrome浏览器) 上传图片时 打开文件夹的延迟问题

    在使用 ueditor 开发时, 作为一个web文本编辑器使用时. 当点击上传图片时, 文件夹要延迟好久才能打开. 解决: 针对多图片上传, 将/ueditor/dialogs/image/image ...

  8. C#遍历指定文件夹中的所有文件(转)

    原文链接:http://www.cnblogs.com/qianqianfy/archive/2009/07/08/1518974.html 1. C#遍历指定文件夹中的所有文件 DirectoryI ...

  9. C#遍历指定文件夹中的所有文件(转)

    C#遍历指定文件夹中的所有文件 DirectoryInfo TheFolder=new DirectoryInfo(folderFullName);//遍历文件夹foreach(DirectoryIn ...

随机推荐

  1. openstack 租户、用户管理

    创建domain [root@cc01 ~]# openstack domain create --description "Default Domain" default +-- ...

  2. for循环添加的闭包问题

    function test(){ var arr = []; for (var i=0;i;i++){ arr[i] = function(){ console.log(i); } } return ...

  3. [置顶] AngularJS实战之路由ui-sref-active使用

    当我们使用angularjs的路由时,时常会出现一个需求,当选中菜单时把当前菜单的样式设置为选中状态(多数就是改变颜色) 接下来就看看Angular-UI-Router里的指令ui-sref-acti ...

  4. 实例讲解Silverlight 初始控件如何获得焦点

    这个问题本来是在我实际的项目中遇到过的,但这其实是当初项目要求,要求一进入就要使得在用户名那个文字框中聚焦,而不是再用鼠标去点击获得焦点,后来自己费了点时间解决了.本来我没太注意就过去了,没想到在QQ ...

  5. 添加全局函数$.extend和对象方法$.fn

    ## $(function () { $.fn.shadow = function (opts) { return this.each(function () { var defaults = { / ...

  6. 20169207《Linux内核原理与分析》第八周作业

    本章的作业依旧包括两部分,1.阅读学习教材「Linux内核设计与实现 (Linux Kernel Development)」第教材第11,12章. 2.学习MOOC「Linux内核分析」第六讲「进程的 ...

  7. noip第11课资料

  8. lowbit(x)

    int Lowbit(int x) { return x&(-x); } lowbit当中x,-x,补码,反码,傻傻分不清楚.我们先看看两个二进制数相减的问题 两个二进制数相减的相关问题 两个 ...

  9. Delphi XE 新功能试用:多种皮肤样式静、动态设置方法

    静态方式:1.新建VCL Forms Application:2.打开菜单Project - Application - Appearance:3.在Custom Styles中可选择所有默认带的皮肤 ...

  10. ReportMachine OCX 的使用方法

    ReportMachine OCX http://rmachine.haotui.com/thread-55-1-1.html RMReport.ocx RMEngine.Init(1); // 初始 ...