首页 > Web开发 > 详细

CKEditor 上传图片 MVC

时间:2015-08-16 21:06:58      阅读:531      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!