.net core CKEditor 图片上传
最近在玩 asp.net core,不想用UEditor,想使用CKEditor。故需要图片上传功能。
废话不多说,先上效果图:
CKEditor 前端代码:
<text id="content" name="content"></text>
<script>
CKEDITOR.replace('content');
</script>
CKeditor config.js 配置代码:需要配置图片上传路径
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.baseHref = "http://" + location.host; config.filebrowserImageUploadUrl = '/Upload/UploadImage';
config.font_names = '宋体/宋体;黑体/黑体;楷体/楷体;幼圆/幼圆;微软雅黑/微软雅黑;' + config.font_names;
config.allowedContent = true;
};
如上代码,我们使用UploadController的UploadImage方法来处理上传事件。
服务端代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Hosting;
using System.IO;
using Ratuo.Common;
namespace Ratuo.Web.Controllers
{
public class UploadController : Controller
{
private IHostingEnvironment _env;
public UploadController(IHostingEnvironment env)
{
_env = env;
} public async Task<IActionResult> UploadImage()
{
string callback = Request.Query["CKEditorFuncNum"];//要求返回值
var upload = Request.Form.Files[];
string tpl = "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(\"{1}\", \"{0}\", \"{2}\");</script>";
if (upload == null)
return Content(string.Format(tpl, "", callback, "请选择一张图片!"), "text/html");
//判断是否是图片类型
List<string> imgtypelist = new List<string> { "image/pjpeg", "image/png", "image/x-png", "image/gif", "image/bmp" };
if(imgtypelist.FindIndex(x=>x == upload.ContentType) == -)
{
return Content(string.Format(tpl, "", callback, "请上传一张图片!"), "text/html");
}
var data = Request.Form.Files["upload"];
string filepath = _env.WebRootPath+"\\userfile\\images";
string imgname = Utils.GetOrderNum() + Utils.GetFileExtName(upload.FileName);
string fullpath = Path.Combine(filepath, imgname);
try
{
if (!Directory.Exists(filepath))
Directory.CreateDirectory(filepath);
if (data != null)
{
await Task.Run(() =>
{
using (FileStream fs = new FileStream(fullpath, FileMode.Create))
{
data.CopyTo(fs);
}
});
}
}
catch (Exception ex)
{
return Content(string.Format(tpl, "", callback, "图片上传失败:"+ ex.Message), "text/html");
}
return Content(string.Format(tpl, "/userfile/images/" + imgname, callback, ""), "text/html");
}
}
}
编译,预览一下。即可!
.net core CKEditor 图片上传的更多相关文章
- springMVC和ckeditor图片上传
springMVC和ckeditor图片上传 http://blog.csdn.net/liuchangqing123/article/details/45270977 修正一下路径问题: packa ...
- 简单2步实现 asp.net mvc ckeditor 图片上传
1.打开ckeditor 包下的 config.js,添加一句 配置(PS:ckeditor 很多功能都在该配置文件里配置),如下: config.filebrowserImageUploadUrl ...
- CKEditor图片上传实现详细步骤(使用Struts 2)
本人使用的CKEditor版本是3.6.3.CKEditor配置和部署我就不多说. CKEditor的编辑器工具栏中有一项“图片域”,该工具可以贴上图片地址来在文本编辑器中加入图片,但是没有图片上传. ...
- CKEditor图片上传问题(默认安装情况下编辑器无法处理图片),通过Base64编码字符串解决
准备做一个文章内容网站,网页编辑器采用CKEditor,第一次用,默认安装情况下,图片无法插入,提示没有定义上传适配器(adapter),错误码提示如下: 根据提示,在官网看到有两种途径:一使用CKE ...
- CKEditor 图片上传
可以做如下配置: CKEDITOR.replace('editor1',{ filebrowserBrowseUrl:'/browser/browse.php', filebrowserUploadU ...
- C# MVC 使用 CKEditor图片上传 提示“不正确的服务器响应”
重点:看一下你使用的CKEditor版本 过程: 后台需要一款富文本编辑器.经过挑选后,最后选择了FCKEditor 的升级版 CKEditor .在官网下载了4.10.1版本. 经过一番配置后,富文 ...
- ckeditor图片上传二三事
最近实验室要用ckeditor,踩了几个小坑记录下. 1.出现iframe跨域问题 response.setHeader("X-Frame-Options", "SAME ...
- Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程
Asp.Net Core Web Api图片上传及MongoDB存储实例教程(一) 图片或者文件上传相信大家在开发中应该都会用到吧,有的时候还要对图片生成缩略图.那么如何在Asp.Net Core W ...
- 使用struts2完成ckeditor和图片上传
代码地址如下:http://www.demodashi.com/demo/12427.html 使用struts2完成ckeditor和ckeditor图片上传 ckeditor版本ckeditor_ ...
随机推荐
- Java:字节流和字符流(输入流和输出流)
本文内容: 什么是流 字节流 字符流 首发日期:2018-07-24 什么是流 流是个抽象的概念,是对输入输出设备的抽象,输入流可以看作一个输入通道,输出流可以看作一个输出通道. 输入流是相对程序而言 ...
- github仓库本地创建上传远程仓库
1.现在githubu创建自己心意的仓库. 2.然后再本地创建文件夹 echo"# (远程仓库的名字) >>README.md git add README.md git co ...
- vertical-align属性探究
在前端开发中我们经常需要将元素垂直居中对齐,我们很自然的想到使用vertical-align属性,但是使用后却发现有时候能起作用,有时候却又不起作用.究其原因还是因为我们没有将vertical-ali ...
- Scala类型限定
package big.data.analyse.scala /** * 类型限定 * Created by zhen on 2018/12/9. */ object Lxxd { def main( ...
- java任意n以内连续的和等于n
import java.util.Scanner; /** * Created by Admin on 2017/3/25. */ public class test01 { public stati ...
- 前后端分离djangorestframework——视图组件
CBV与FBV CBV之前说过就是在view.py里写视图类,在序列化时用过,FBV就是常用的视图函数,两者的功能都可以实现功能,但是在restful规范方面的话,CBV更方便,FBV还要用reque ...
- 谁记录了mysql error log中的超长信息
[问题] 最近查看MySQL的error log文件时,发现有很多服务器的文件中有大量的如下日志,内容很长(大小在200K左右),从记录的内容看,并没有明显的异常信息. 有一台测试服务器也有类似的问题 ...
- Python常用的数据类型转换
在实际开发中.经常要根据需求来转变一些变量的类型. 需要用到以下函数:
- Windows10家庭版连接远程桌面出现credssp加密oracle修正问题
我发现我的win10不能连接别人的远程桌面,问题如下: 1.windows10家庭版需要修改注册表,家庭版没有组织策略: 2.win+R打开快速启动命令行输入"regedit": ...
- Python3 实现简易局域网视频聊天工具
Python3 实现简易局域网视频聊天工具 1.环境 操作系统为 Ubuntu 16.04 python 3.5opencv-python 3.4.1.15numpy 1.14.5PyAudio ...