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

 更新时间:2016年11月02日 11:43:27   作者: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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • asp.net 页面回跳实现代码

    asp.net 页面回跳实现代码

    今天做登录时,遇到点小问题,在网上找了一下,没看到源码案例,不过还是花了一点时间调试通过了在此记录一下,备忘。
    2010-03-03
  • asp.net 取消缓存相关问题说明

    asp.net 取消缓存相关问题说明

    asp.net 取消缓存相关问题说明,需要的朋友可以参考下。
    2009-11-11
  • 教你Asp.net下使用mysql金沙国际官网的步骤

    教你Asp.net下使用mysql金沙国际官网的步骤

    近日,在项目中遇到了麻烦,客户非要求使用mysql金沙国际官网,对于我从来么有使用过的人来说,很是头疼,最后还是硬着头皮弄好了。期间也遇到了各种各样的问题,现在把他整理在此,希望对那些和我一样从来没有使用过的人,能快速入手
    2012-05-05
  • ASP.NET文件上传Upload的实现方法

    ASP.NET文件上传Upload的实现方法

    这篇文章主要为大家详细介绍了ASP.NET文件上传的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 微信JS-SDK分享功能的.Net实现代码

    微信JS-SDK分享功能的.Net实现代码

    这篇文章主要介绍了微信JS-SDK分享功能的.Net实现代码的相关资料,需要的朋友可以参考下
    2017-09-09
  • ASP.NET MVC重写RazorViewEngine实现多主题切换

    ASP.NET MVC重写RazorViewEngine实现多主题切换

    这篇文章主要为大家详细介绍了ASP.NET MVC重写RazorViewEngine实现多主题切换,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • ASP.NET实现伪静态网页方法小结

    ASP.NET实现伪静态网页方法小结

    这篇文章主要介绍了ASP.NET实现伪静态网页方法小结,主要包括了利用Httphandler实现URL重写、地址重写、利用Mircosoft URLRewriter.dll实现页面伪静态等,需要的朋友可以参考下
    2014-09-09
  • asp.net SharpZipLib的压缩与解压问题

    asp.net SharpZipLib的压缩与解压问题

    关于SharpZipLib的压缩与解压缩的实现代码,网络上有一堆,千遍一律,连注释也一模一样,一模一样的文章拷来拷去??
    2009-11-11
  • 深入讲解.Net Core中的Api版本控制

    深入讲解.Net Core中的Api版本控制

    这篇文章主要给大家介绍了关于.Net Core中Api版本控制的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-10-10
  • .NET验证组件Fluent Validation使用指南

    .NET验证组件Fluent Validation使用指南

    本文介绍了.NET验证组件Fluent Validation,并通过实例告诉我们这个验证组件的使用方法,以及与asp.net mvc验证库的整合方案,这里推荐给有相同需求的小伙伴
    2014-11-11

最新评论