asp.net core集成kindeditor实现图片上传功能

1.visual studio 2015 update3开发环境

2.net core 1.0.1 及以上版本

目录

新建asp.net core web项目

下载kindeditor

增加图片上传控制器

配置kindeditor参数

代码下载

新建asp.net core web项目

新建一个asp.net core项目,这里命名为kindeditor

asp.net core集成kindeditor实现图片上传功能

选中web应用程序

asp.net core集成kindeditor实现图片上传功能

下载kindeditor

这里我们新建了一个系统自带的样本项目,去 kindeditor官网下载一个版本,解压后拷贝大wwwroot中

asp.net core集成kindeditor实现图片上传功能

修改views/index.cshtml

@{ ViewData["Title"] = "Home Page"; } <link href="https://www.jb51.net/~/kindeditor/themes/default/default.css" /> <script src="https://www.jb51.net/~/kindeditor/kindeditor-min.js"></script> <script src="https://www.jb51.net/~/kindeditor/lang/zh_CN.js"></script> <div> <textarea> </textarea> </div> <script type="text/javascript"> //实例化编辑器 //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例 KindEditor.ready(function (K) { window.editor = K.create('#detail_desc', { width: '98%', height: '500px' }); }); </script>

运行一下现在就可以看到kindeditor已经集成进来了。

asp.net core集成kindeditor实现图片上传功能

增加图片上传控制器

注意返回是一个json对象,因此建了一个简单的对象返回。

using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Http; using Microsoft.Net.Http.Headers; using Microsoft.AspNetCore.Hosting; using System.IO; namespace kindeditortest.Controllers { public class HomeController : Controller { private IHostingEnvironment hostingEnv; public IActionResult Index() { return View(); } public HomeController(IHostingEnvironment env) { this.hostingEnv = env; } /// <summary> /// Kindeditor图片上传 /// </summary> /// <param>Kindeditor图片上传自带的命名,不可更改名称</param> /// <param>不可更改名称 这里没有用到dir</param> /// <returns></returns> public IActionResult KindeditorPicUpload(IList<IFormFile> imgFile, string dir) { PicUploadResponse rspJson = new PicUploadResponse() { error = 0, url = "/upload/" }; long size = 0; string tempname = ""; foreach (var file in imgFile) { var filename = ContentDispositionHeaderValue .Parse(file.ContentDisposition) .FileName .Trim('"'); var extname = filename.Substring(filename.LastIndexOf("."), filename.Length - filename.LastIndexOf(".")); var filename1 = System.Guid.NewGuid().ToString() + extname; tempname = filename1; var path = hostingEnv.WebRootPath; filename = hostingEnv.WebRootPath + $@"\upload\{filename1}"; size += file.Length; using (FileStream fs = System.IO.File.Create(filename)) { file.CopyTo(fs); fs.Flush(); //这里是业务逻辑 } } rspJson.error = 0; rspJson.url = $@"../../upload/" + tempname; return Json(rspJson); } public IActionResult About() { ViewData["Message"] = "Your application description page."; return View(); } public IActionResult Contact() { ViewData["Message"] = "Your contact page."; return View(); } public IActionResult Error() { return View(); } } public class PicUploadResponse { public int error { get; set; } public string url { get; set; } } }

配置kindeditor参数

<script type="text/javascript"> //实例化编辑器 //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例 KindEditor.ready(function (K) { window.editor = K.create('#detail_desc', { width: '98%', height: '500px', uploadJson: '/home/KindeditorPicUpload', fileManagerJson: '/home/KindeditorPicUpload', allowFileManager: true }); }); </script>

运行效果

asp.net core集成kindeditor实现图片上传功能

asp.net core集成kindeditor实现图片上传功能

源码下载:(jb51.net).rar

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjygwj.html