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 图片上传的更多相关文章

  1. Asp.net MVC 实现图片上传剪切

    使用技术:Asp.net MVC与jquery.uploadify,Jcrop 首先上页面 01 <strong><!DOCTYPE html> 02  <html> ...

  2. c# ASP.NET MVC easyui-filebox 图片上传和显示

    原文:https://www.cnblogs.com/huatao/p/4727398.html https://www.cnblogs.com/weiweithe/p/4363458.html 表单 ...

  3. Asp.net mvc 大文件上传 断点续传

    Asp.net mvc 大文件上传 断点续传 进度条   概述 项目中需要一个上传200M-500M的文件大小的功能,需要断点续传.上传性能稳定.突破asp.net上传限制.一开始看到51CTO上的这 ...

  4. MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】(八) ASP.NET MVC 图片上传到服务器

    MVC图片上传.浏览.删除   1.存储配置信息 在web.config中,添加配置信息节点 <appSettings> <add key="UploadPath" ...

  5. ASP.NET MVC+LayUI视频上传

    前言: 前段时间在使用APS.NET MVC+LayUI做视频上传功能的时,发现当上传一些内存比较大的视频就会提示上传失败,后来通过查阅相关资料发现.NET MVC框架为考虑安全问题,在运行时对请求的 ...

  6. springMVC和ckeditor图片上传

    springMVC和ckeditor图片上传 http://blog.csdn.net/liuchangqing123/article/details/45270977 修正一下路径问题: packa ...

  7. 探索Asp.net mvc 的文件上传

    (转自:http://www.cnblogs.com/n-pei/archive/2010/10/15/1852635.html) 最近因为TeamVideo需要用到视频和图片上传功能,所以试着Goo ...

  8. 探索Asp.net mvc 的文件上传(由浅入深)

    代码下载:http://files.cnblogs.com/n-pei/mvcfileupload.zip 最近因为TeamVideo需要用到视频和图片上传功能,所以试着Google了很多资料,和大家 ...

  9. .net core CKEditor 图片上传

    最近在玩 asp.net core,不想用UEditor,想使用CKEditor.故需要图片上传功能. 废话不多说,先上效果图: CKEditor 前端代码: <text id="co ...

随机推荐

  1. PHP_零基础学php_2变量、预定义变量、预定义常量、表达式、运算符、程序控制流程

    1.变量 PHP中使用$后跟变量名表示一个变量,变量名区分大小写. 变量的数据类型 整数类型 浮点类型 字符串类型 布尔类型 数组类型 对象 <html> <head> < ...

  2. Cocos2d-x学习笔记(14)(更新函数scheduleUpdate、进度计时器CCProgressTo、滚动视图CCScrollView)

    一.scheduleUpdate 1.scheduleUpdate:此函数是CCNode的函数,每一个CCNode仅仅要调用scheduleUpdate更新函数,那么这个CCNode就会响应当前类的u ...

  3. 使用jquery实现放大镜效果

    原文:使用jquery实现放大镜效果 实现原理 首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置. 方法二:对原图片进行放大,也就是调整 ...

  4. Redis 优化查询性能

    一次使用 Redis 优化查询性能的实践   应用背景 有一个应用需要上传一组ID到服务器来查询这些ID所对应的数据,数据库中存储的数据量是7千万,每次上传的ID数量一般都是几百至上千数量级别. 以前 ...

  5. 如何运行代码apk安装

    import java.io.File; import android.app.Activity; import android.content.Intent; import android.net. ...

  6. PDFBox 介绍

    根据官网的介绍可知,PDFBox是一个用来处理PDF文档的开源的Java工具包.这个项目运行创建PDF文档.对已有文档进行操作并且能够从文档中提取内容.它也包含了几个命令行工具.还有一点很重要,它是开 ...

  7. 提高C#编程水平的50个要点 你掌握了多少呢?

    提高C#编程水平的50个要点,程序员都是追求极致的完美主义者,下面的这些注意点和要点,你都掌握运用了多少呢? 总是用属性(Property)来代替可访问的数据成员 在 readonly 和 const ...

  8. 前台框架的选择 EasyUI、DWZ、ligerui

    EasyUI1.3.1+MVC4.0+EF5.0 番外篇 关于前台框架的选择 EasyUI.DWZ.ligerui 昨天发了EasyUI1.3.1+MVC4.0+EF5.0实战之一 开篇及布局控件介绍 ...

  9. 【剑指offer】的功率值

    标题叙述性说明: 实现函数double Power(double base, int exponent),求base的exponent次方.不得使用库函数.同一时候不须要考虑大数问题. 分析描写叙述: ...

  10. javascript call和apply

    每个函数都包含两个非继承而来的方法:call和apply. 我们可以通过这两个方法来间接调用函数.可以这样: f.call(o); f.apply(o); //o对象间接调用了f函数 这与下面的功能相 ...