asp.net core集成kindeditor实现图片上传功能
2016-11-02 00:00
1001 查看
本文为大家分享了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
这里我们新建了一个系统自带的样本项目,去 kindeditor官网下载一个版本,解压后拷贝大wwwroot中
修改views/index.cshtml
运行一下现在就可以看到kindeditor已经集成进来了。
增加图片上传控制器
注意返回是一个json对象,因此建了一个简单的对象返回。
配置kindeditor参数
运行效果
源码下载:http://xiazai.jb51.net/201611/yuanma/ASP.NETkindeditor(jb51.net).rar
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
nodejs 整合kindEditor实现图片上传
KindEditor图片上传的Asp.net代码实例
ASP.NET插件uploadify批量上传文件完整使用教程
基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)
基于ASP.NET+easyUI框架实现图片上传功能(判断格式+即时浏览 )
asp.net core实现文件上传功能
ASP.NET MVC图片上传前预览简单实现
ASP.NET MVC实现图片上传、图片预览显示
ASP.NET MVC 文件上传教程(一)
准备工作
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
这里我们新建了一个系统自带的样本项目,去 kindeditor官网下载一个版本,解压后拷贝大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>
运行效果
源码下载:http://xiazai.jb51.net/201611/yuanma/ASP.NETkindeditor(jb51.net).rar
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
js控件Kindeditor实现图片自动上传功能nodejs 整合kindEditor实现图片上传
KindEditor图片上传的Asp.net代码实例
ASP.NET插件uploadify批量上传文件完整使用教程
基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)
基于ASP.NET+easyUI框架实现图片上传功能(判断格式+即时浏览 )
asp.net core实现文件上传功能
ASP.NET MVC图片上传前预览简单实现
ASP.NET MVC实现图片上传、图片预览显示
ASP.NET MVC 文件上传教程(一)
相关文章推荐
- GDI +实现的上传图片画图功能
- js实现IE7图片上传预览的功能代码
- Spring MVC 实现图片上传功能
- 一个实现图片上传/产生缩略图/在上传图片上写字功能的完整页面代码
- 纯AS代码flash实现预览上传本地图片功能
- 图片上传功能的实现(FileUpload组件的使用)
- 人人网的相册里图片上传功能是怎样实现的
- WCF实现上传图片功能
- Flex中使用RemoteObject实现图片上传功能
- 实现上传图片的功能
- 通过JS实现上传图片的功能
- 上传图片功能的又一实现
- 在asp.Net中使用fileuplod控件实现上传图片的功能
- 如何实现 asp 上传产品图片加水印功能
- jsp实现图片上传功能
- ASP上传图片至数据库内功能的实现
- ASP上传图片功能的又一实现(OLE对象)
- 在asp.Net中使用fileuplod控件实现上传图片的功能
- PHP 中配置 ckeditor(fckeditor的新版本)+ckfinder ,实现上传图片功能。
- WCF实现上传图片功能