简单2步实现 asp.net mvc ckeditor 图片上传
1.打开ckeditor 包下的 config.js,添加一句 配置(PS:ckeditor 很多功能都在该配置文件里配置),如下:
config.filebrowserImageUploadUrl = "/Home/Upload";
说明:ckeditor 默认编辑框的图片功能里是没有 “上传” 这个tab选项的,当配置上面那句后,就会出现“上传” tab选项。 后面的 "/Home/Upload" 表示 图片上传的后台处理程序路径。为了更直观的看到效果,下面为图片演示。


2.在Controller在实现upload Action,保存图片。
[HttpPost]
public ActionResult Upload(HttpPostedFileBase upload)
{
var fileName = System.IO.Path.GetFileName(upload.FileName);
var filePhysicalPath = Server.MapPath("~/upload/" + fileName);//我把它保存在网站根目录的 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>");
}
说明:就是第1步那一句配置,我们的本地图片上传功能差不多完成了一半了,而在这一步我们需要做的是把本地上传的图片保存到服务器,并使它在编辑框内显示。在上面那句配置里,我写了一个url路径,那么我们的图片上传就在这这个路径中处理,其实我们通过 F12 可以发现,它就是一个 <input type = 'file' />这样的标签,跟简单的文件上传没上面区别。下面为图片演示:



我在google上找到了一篇文章,他上面介绍了两种方式,一种是我这种在ckeditor中配置,另一种是通过外部的上传控件实现,然后再把它图像嵌入到ckeditor中去。
链接:http://www.codedigest.com/Articles/ASPNET/423_Upload_Images_and_Integrate_with_CKeditor_in_AspNet.aspx
简单2步实现 asp.net mvc ckeditor 图片上传的更多相关文章
- Asp.net MVC 实现图片上传剪切
使用技术:Asp.net MVC与jquery.uploadify,Jcrop 首先上页面 01 <strong><!DOCTYPE html> 02 <html> ...
- c# ASP.NET MVC easyui-filebox 图片上传和显示
原文:https://www.cnblogs.com/huatao/p/4727398.html https://www.cnblogs.com/weiweithe/p/4363458.html 表单 ...
- Asp.net mvc 大文件上传 断点续传
Asp.net mvc 大文件上传 断点续传 进度条 概述 项目中需要一个上传200M-500M的文件大小的功能,需要断点续传.上传性能稳定.突破asp.net上传限制.一开始看到51CTO上的这 ...
- MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】(八) ASP.NET MVC 图片上传到服务器
MVC图片上传.浏览.删除 1.存储配置信息 在web.config中,添加配置信息节点 <appSettings> <add key="UploadPath" ...
- ASP.NET MVC+LayUI视频上传
前言: 前段时间在使用APS.NET MVC+LayUI做视频上传功能的时,发现当上传一些内存比较大的视频就会提示上传失败,后来通过查阅相关资料发现.NET MVC框架为考虑安全问题,在运行时对请求的 ...
- springMVC和ckeditor图片上传
springMVC和ckeditor图片上传 http://blog.csdn.net/liuchangqing123/article/details/45270977 修正一下路径问题: packa ...
- 探索Asp.net mvc 的文件上传
(转自:http://www.cnblogs.com/n-pei/archive/2010/10/15/1852635.html) 最近因为TeamVideo需要用到视频和图片上传功能,所以试着Goo ...
- 探索Asp.net mvc 的文件上传(由浅入深)
代码下载:http://files.cnblogs.com/n-pei/mvcfileupload.zip 最近因为TeamVideo需要用到视频和图片上传功能,所以试着Google了很多资料,和大家 ...
- .net core CKEditor 图片上传
最近在玩 asp.net core,不想用UEditor,想使用CKEditor.故需要图片上传功能. 废话不多说,先上效果图: CKEditor 前端代码: <text id="co ...
随机推荐
- 【Leetcode】Remove Duplicates from Sorted List in JAVA
Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...
- PHP经验——获得PHP版本信息及版本比较
原文:PHP经验--获得PHP版本信息及版本比较 偶然看到别人写的一句代码: <?php if (version_compare("5.2", PHP_VERSION, &q ...
- ios 安装OpenFire
1.开发xmpp官网下载 2.打开openfire.pkg 3.点击继续 4.成功安装后打开偏好设置 ->双击poenfire->弹出窗体[好] 5.随后会弹出以下这个视图 开启 strr ...
- 关于Java中List对象的分页思想,按10个或者n个数对list进行分组
try { List<String> timelist = DateUtils.getDateListBySETime("2015-08-01", "2015 ...
- 给phpcms v9加入一个主题radio无线电button,它可反复使用,以创建不同的专题部分内容编辑器,添加一个主题来定义自己的领域
1. 2. 找到 phpcms\modules\special\templates中的special_add.tpl.php和special_edit.tpl.php文件 special_add.tp ...
- lsof基本使用
当你想在计算机上启动一个服务,电脑已经建议"port already in use",此时,可以使用lsof命令查看占用端口的进程(lsof -i:port). lsof这是LiS ...
- 推送之HelloWorld及个推Smart Push
最近有个朋友想要推送一些消息到自己的APP上,自己用了HTTP轮询的方式比较耗电,也比较占用流量,一旦用户关闭了进程,消息则很难触达,于是,咨询我有没有什么好的解决方案.我告诉他其实可以使用推送,他瞪 ...
- 编辑控件CKEditor和CKFinder
-使用HTML编辑控件CKEditor和CKFinder Web开发上有很多HTML的编辑控件,如CKEditor.kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEdit ...
- 详解SpringMVC请求的时候是如何找到正确的Controller
详解SpringMVC请求的时候是如何找到正确的Controller[附带源码分析] 目录 前言 源码分析 重要接口介绍 SpringMVC初始化的时候做了什么 HandlerExecutionCha ...
- 大规模web服务开发技术
大规模web服务开发技术 总评 这本书是日本一个叫hatena的大型网站的CTO写的,通过hatena网站从小到大的演进来反应一个web系统从小到大过程中的各种系统和技术架构变迁,比较接 ...