[Asp.net core 2.0]Ueditor 图片上传
摘要
在项目中要用到富文本编辑器,包含上传图片,插入视频等功能。但ueditor只有.net版本,没有支持core。那么上传等接口就需要自己实现了。
一个例子
首先去百度ueditor官网下载简化版的ueditor。并引入到项目中
如图:
页面引用以下几个文件:
<link href="~/ueditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet" />
<script src="~/ueditor/third-party/jquery.min.js"></script>
<script src="~/ueditor/umeditor.config.js" charset="utf-8"></script>
<script src="~/ueditor/umeditor.js" charset="utf-8"></script>
<script src="~/ueditor/lang/zh-cn/zh-cn.js"></script>
修改ueditor配置文件:
//为编辑器实例添加一个路径,这个不能被注释
UMEDITOR_HOME_URL: URL //图片上传配置区
, imageUrl: "../fileupload/UeditorUpload" //图片上传提交地址
, imagePath: URL + "net/" //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
, imageFieldName: "upfile" //图片数据的key,若此处修改,需要在后台对应文件修改对应参数 //工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义
, toolbar: [
'source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize',
'| justifyleft justifycenter justifyright justifyjustify |',
'link unlink | image video |',
'horizontal print preview fullscreen'
]
添加接收文件控制器,并提供接口
using System;
using System.Collections;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc; namespace FireFly.Admin.Controllers
{
public class FileUploadController : Controller
{
private IHostingEnvironment hostingEnv;
public FileUploadController(IHostingEnvironment env)
{
hostingEnv = env;
}
public async Task<IActionResult> UeditorUpload()
{
var files = Request.Form.Files;
string callback = Request.Query["callback"];
string editorId = Request.Query["editorid"];
if (files != null && files.Count > )
{
var file = files[];
string contentPath = hostingEnv.WebRootPath;
string fileDir = Path.Combine(contentPath, "upload");
if (!Directory.Exists(fileDir))
{
Directory.CreateDirectory(fileDir);
}
string fileExt = Path.GetExtension(file.FileName);
string newFileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + fileExt;
string filePath = Path.Combine(fileDir, newFileName);
using (FileStream fs = new FileStream(filePath, FileMode.Create))
{
await file.CopyToAsync(fs);
}
var fileInfo = getUploadInfo("../../upload/" + newFileName, file.FileName,
Path.GetFileName(filePath), file.Length, fileExt);
string json = BuildJson(fileInfo); Response.ContentType = "text/html";
if (callback != null)
{
await Response.WriteAsync(String.Format("<script>{0}(JSON.parse(\"{1}\"));</script>", callback, json));
}
else
{
await Response.WriteAsync(json);
}
return View();
}
return NoContent();
}
private string BuildJson(Hashtable info)
{
List<string> fields = new List<string>();
string[] keys = new string[] { "originalName", "name", "url", "size", "state", "type" };
for (int i = ; i < keys.Length; i++)
{
fields.Add(String.Format("\"{0}\": \"{1}\"", keys[i], info[keys[i]]));
}
return "{" + String.Join(",", fields) + "}";
}
/**
* 获取上传信息
* @return Hashtable
*/
private Hashtable getUploadInfo(string URL, string originalName, string name, long size, string type, string state = "SUCCESS")
{
Hashtable infoList = new Hashtable(); infoList.Add("state", state);
infoList.Add("url", URL);
infoList.Add("originalName", originalName);
infoList.Add("name", Path.GetFileName(URL));
infoList.Add("size", size);
infoList.Add("type", Path.GetExtension(originalName)); return infoList;
}
} }
测试
总结
这里简单实现了ueditor在asp.net core 2.0 web应用中的使用,需要实现的只是文件的上传接口。
[Asp.net core 2.0]Ueditor 图片上传的更多相关文章
- 在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片
在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文 ...
- ueditor图片上传插件的使用
在项目里使用到ueditor图片上传插件,以前图片上传都是直接使用js代码直接上传图片,比较麻烦,而且效率也比较低,而ueditor这款插件完美的解决了这个问题,这个是百度开发的一款富文本编辑器,在这 ...
- ueditor图片上传配置
ueditor图片上传配置文件为ueditor/php/config.json /* 上传图片配置项 */ "imageActionName": "uploadimage ...
- asp.net ueditor 图片上传路径问题解决
最近练习做一个新闻系统,其中不能少了添加新闻和修改新闻的功能 ,而且还要添加图片.添加文字样式, 所以不得不使用富文本编辑器,在kindeditor和ueditor中,选择了目前还在持续更新的百度产品 ...
- Asp.Net Mvc 使用WebUploader 多图片上传
来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...
- springboot+UEditor图片上传
springboot+UEDitor百度编辑器整合图片上记录于此 1.下载ueditor插件包,解压到static/ueditor目录下 2.在你所需实现编辑器的页面引用三个JS文件 1) uedi ...
- ASP.NET工作笔记之一:图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- 百度UEditor图片上传或文件上传路径自定义
最近在项目中使用到百度UEditor的图片以及文件上传功能,但在上传的时候路径总是按照预设规则来自动生成,不方便一些特殊文件的维护.于是开始查看文档和源代码,其实操作还是比较简单的,具体如下: 1.百 ...
- CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法
因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...
随机推荐
- if 语句 写了return 报错
- kali的中文输入法-安装后无中文选项的解决办法
我在我实体电脑上安装了kali 本想安装个中文输入法但是有时候输入发中根本没有选择输入法的这一项.所以导致很别扭,之前在虚机上安装过没有问题但是挪到实体机上就是没有用的也是fcitx,这一度让我这个小 ...
- umount /mnt/cdrom
这是因为有程序正在访问这个设备,最简单的办法就是让访问该设备的程序退出以后再umount.可能有时候用户搞不清除究竟是什么程序在访问设备,如果用户不急着umount,则可以用: umount -l / ...
- 初始ASP.NET数据控件GridView
使用GridView控件绑定数据源 GridView控件个人认为就是数据表格控件,它以表格的形式显示数据源中的数据.每列表示一个字段,每行表示一条记录. GridView控件支持在页面有一下功 ...
- SqlServer中 CREATE PARTITION FUNCTION使用
表分区的操作三步走: 1.创建分区函数 CREATE PARTITION FUNCTION xx1(int) 解释:在当前数据库中创建一个函数,该函数可根据指定列的值将表或索引的各行映射到分区. 语法 ...
- SqlServerDBCC SHRINKFILE不起作用
检查索引碎片的结果: CREATE DATABASE test_shrink USE test_shrink CREATE TABLE show_extent(a INT,b NVARCHAR(390 ...
- ***Linux系统下如何查看及修改文件读写权限
查看文件权限的语句: 在终端输入:ls -l xxx.xxx (xxx.xxx是文件名) 那么就会出现相类似的信息,主要都是这些:-rw-rw-r-- 一共有10位数 其中: 最前面那个 - 代表的是 ...
- 《JavaScript 高级程序设计》第一章:简介
JavaScript 历史 JavaScript的诞生的主要是当时的 netspace 公司谋求为自己的浏览器 Navigator 添加一种脚本语言,以便在本地客户端进行一些行为操作,而这一功能的需求 ...
- 切换Intellij ieda 调试为Visual Studio风格
- CSS 浮动和清除
CSS 浮动和清除浮动 在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这 ...