码迷,mamicode.com
首页 > Web开发 > 详细

CKEditor 上传图片 MVC

时间:2015-08-16 21:10:07      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:

1.点击上传图片,会看到如下图1,在预览中出现一段文字,在image.js中会找到该段文字,删掉即可。即可看到预览框中没有了这段文字。

技术分享           技术分享        技术分享      

                     (1)                                                          (2)                                          (3)

 2.好,现在准备开始添加上传功能,在“图像信息”与“链接”tab后还有一个上传Tab,同样在image.js文件中找到id:"Upload",hidden:!0,  将hidden:!0改为,hidden:0

出现了“上传”Tab.

技术分享

 

3.下面就该实现上传的方法了,首先在config.js中添加config.filebrowserImageUploadUrl = "/FileUpload/Upload";技术分享 后面的  "/FileUpload/Upload" 表示 图片上传的后台处理程序路径。
4.在FileUploadController中添加图片上传处理程序

[HttpPost]
public ActionResult Upload(HttpPostedFileBase upload)
{
var fileName = System.IO.Path.GetFileName(upload.FileName);
var filePhysicalPath = Server.MapPath("~/upload/" + fileName);//我把它保存在网站根目录的 upload 文件夹
if (!Directory.Exists(Server.MapPath("~/upload")))
{
Directory.CreateDirectory(Server.MapPath("~/upload"));
}
upload.SaveAs(filePhysicalPath);

var url = "/upload/" + fileName;
var CKEditorFuncNum = System.Web.HttpContext.Current.Request["CKEditorFuncNum"];

//上传成功后,我们还需要通过以下的一个脚本把图片返回到第一个tab选项
return Content("<script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + url + "\");</script>");
}

5.上传成功后,图片会显示在第一个tab的预览中

技术分享      技术分享

技术分享

CKEditor 上传图片 MVC

标签:

原文地址:http://www.cnblogs.com/zklmmm/p/4734877.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!