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

时间:2022-08-28 19:58:00

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实现上传图片到指定文件夹在MVC3中修改KindEditor实现上传图片到指定文件夹