本文为大家分享了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
选中web应用程序
下载kindeditor
这里我们新建了一个系统自带的样本项目,去 r官网下载一个版本,解压后拷贝大wwwroot中
修改views/index.cshtml
@{ viewdata["title"] = "home page"; } <link href="~/kindeditor/themes/default/default.css" rel="stylesheet" /> <script src="~/kindeditor/kindeditor-min.js"></script> <script src="~/kindeditor/lang/zh_cn.js"></script> <div class="row"> <textarea id="detail_desc" name="detail_desc" style="width:700px;height:300px;"> </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已经集成进来了。
增加图片上传控制器
注意返回是一个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 name="imgfile">kindeditor图片上传自带的命名,不可更改名称</param> /// <param name="dir">不可更改名称 这里没有用到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>
运行效果
源码下载:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
2020.07月 Tensorflow-gpu 2.1版本 win10+NVIDIA GeForce MX150安装趟坑血泪安装记录
curl: (7) Failed connect to IP:port; No route to host解决方案
安凯Cloud39EV200/V300平台支持RDA5995的usb wifi移植过程
网友评论