在MVC3中修改KindEditor实现上传图片到指定文件夹

it2022-05-05  108

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 + "/";

大功告成,刷新试试吧!

 

转载于:https://www.cnblogs.com/denny402/p/3203982.html


最新回复(0)