简单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 ...
随机推荐
- 通过EA导入数据库存在表结构并生成文档
通过EA导入数据库存在表结构并生成文档 慕课网,程序员升职加薪神器,点击免费学习 目录[-] 导入数据源,表结构 生成表结构的文档 Enterprise Architect 是超级强大项目管理功能 ...
- Largest Rectangular Area in a Histogram
题目地址:https://oj.leetcode.com/problems/largest-rectangle-in-histogram/ ,刚開始事实上没做这个题,而是在做https://oj.le ...
- hdu1047 Integer Inquiry 多次大数相加
转载请注明出处:http://blog.csdn.net/u012860063 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1047 Problem ...
- openstack shelve/unshelve/stop浅析
声明: 本博客欢迎转发,但请保留原作者信息! 博客地址:http://blog.csdn.net/halcyonbaby 内容系本人学习.研究和总结,如有雷同,实属荣幸! stop的虚拟机仅仅是将虚拟 ...
- 关于Android开发中导出jar包后的资源使用问题解决
我们经常遇到一个需求,就是给别人使用我们工程的时候,为了能够屏蔽代码,把代码封装成jar包提供给第三方使用,但是这样我们的资源文件怎么给对方用呢? 其实并不用这么的复杂,下面就介绍一下具体的方法 一, ...
- 安卓CTS官方文档之兼容性测试套件简介
官方英文文档原文:https://source.android.com/compatibility/cts-intro.html Compatibility Test Suite 兼容性测试套件 Ho ...
- flash导入图片缩放后出现毛边、失真、锯齿、文字模糊不清晰的情况
原因: 1.flash的性能非常差,这就不得不让它做大量的优化. 2.图片缩放,目前业界有多种算法,画质越好的算法,计算量越大. 3.flash优化了图片缩放,使用了质量非常低的缩放算法.这个做法,保 ...
- Visual Studio 单元测试之四---Generic测试
原文:Visual Studio 单元测试之四---Generic测试 这里的Generic我觉得理解为外部测试更合适.因为在这种测试模式下Visual Studio只是启动一个外部的程序,然后通过返 ...
- leetcode第15题--3Sum
Problem: Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Fi ...
- leetcode第四题--Add Two Numbers
Problem: You are given two linked lists representing two non-negative numbers. The digits are stored ...