源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-03-29 07:27 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:asp.net core集成kindeditor实现图片上传功能
本文为大家分享了asp.net core 如何集成kindeditor并实现图片上传功能的具体方法,供大家参考,具体内容如下 [b]准备工作[/b] 1.visual studio 2015 update3开发环境 2.net core 1.0.1 及以上版本 [b]目录[/b] 新建asp.net core web项目 下载kindeditor 增加图片上传控制器 配置kindeditor参数 代码下载 [b]新建asp.net core web项目[/b] 新建一个asp.net core项目,这里命名为kindeditor [img]http://img.1sucai.cn/uploads/article/2018010709/20180107090125_0_43817.png[/img] 选中web应用程序 [img]http://img.1sucai.cn/uploads/article/2018010709/20180107090125_1_84613.png[/img] [b]下载kindeditor[/b] 这里我们新建了一个系统自带的样本项目,去 [url=http://kindeditor.net/down.php]kindedito[/url]r官网下载一个版本,解压后拷贝大wwwroot中 [img]http://img.1sucai.cn/uploads/article/2018010709/20180107090126_2_79509.png[/img] 修改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已经集成进来了。 [img]http://img.1sucai.cn/uploads/article/2018010709/20180107090126_3_77188.png[/img] [b]增加图片上传控制器[/b] 注意返回是一个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; }
 }
}
[b]配置kindeditor参数[/b]
<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>

运行效果 [img]http://img.1sucai.cn/uploads/article/2018010709/20180107090127_4_57732.png[/img] [img]http://img.1sucai.cn/uploads/article/2018010709/20180107090127_5_22316.png[/img] 源码下载:[url=http://xiazai.1sucai.cn/201611/yuanma/ASP.NETkindeditor(1sucai.cn).rar]http://xiazai.1sucai.cn/201611/yuanma/ASP.NETkindeditor(1sucai.cn).rar[/url] 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部