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

 更新时间:2021年04月28日 09:40:32   作者:fishpro  
这篇文章主要为大家详细介绍了asp.net core集成kindeditor实现图片上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文为大家分享了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

@{
 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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • web.config使用方法指南

    web.config使用方法指南

    这篇文章主要介绍了web.config使用方法,具体格式,注意点等方面,有需要的小伙伴可以参考下。
    2015-05-05
  • asp.net 面试 笔试题目[附答案]

    asp.net 面试 笔试题目[附答案]

    收集并整理自网络,实时更新,希望大家找到合适的工作。
    2009-05-05
  • 详解.net core日记记录

    详解.net core日记记录

    这篇文章主要介绍了.net core的日记记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • ASP.NET实现电影票信息的增删查改功能

    ASP.NET实现电影票信息的增删查改功能

    这篇文章主要介绍了ASP.NET实现电影票信息的增删查改功能的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • ASP.NET中图片显示方法实例

    ASP.NET中图片显示方法实例

    这篇文章主要介绍了ASP.NET中图片显示方法,实例分析了ASP.NET图片显示所涉及的图片路径、缩略图及更新数据库图片浏览次数等相关技巧,需要的朋友可以参考下
    2015-07-07
  • Linux安装.Net core 环境并运行项目的方法

    Linux安装.Net core 环境并运行项目的方法

    这篇文章主要介绍了Linux安装.Net core 环境并运行项目,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • Asp.Net设计模式之单例模式详解

    Asp.Net设计模式之单例模式详解

    这篇文章主要为大家详细介绍了Asp.Net设计模式之单例模式的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Asp.NET Core 如何调用WebService的方法

    Asp.NET Core 如何调用WebService的方法

    这篇文章主要介绍了Asp.NET Core 如何调用WebService的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Asp.Net 通用数据操作类 (附通用数据基类)

    Asp.Net 通用数据操作类 (附通用数据基类)

    以前经常用php的数据操作类,这次的asp.net数据操作类,是个方法
    2008-07-07
  • SQL Server LocalDB 在 ASP.NET中的应用介绍

    SQL Server LocalDB 在 ASP.NET中的应用介绍

    如同交响乐一样,构造软件系统不一定必须某个强大的明星驱动,我们站在历代ADO.NET的肩膀上,更好地回归到SQL Server的核心开发:SQL Server LocalDB 在 ASP.NET中的应用
    2013-01-01

最新评论