如何在asp.net中使用kindeditor实现一个图片上传功能-创新互联

如何在asp.net 中使用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

如何在asp.net 中使用kindeditor实现一个图片上传功能

选中web应用程序

如何在asp.net 中使用kindeditor实现一个图片上传功能

下载kindeditor

这里我们新建了一个系统自带的样本项目,去 kindeditor官网下载一个版本,解压后拷贝大wwwroot中

如何在asp.net 中使用kindeditor实现一个图片上传功能

修改views/index.cshtml

@{
 ViewData["Title"] = "Home Page";
}



 

 
  
  
 //实例化编辑器  //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例  KindEditor.ready(function (K) {   window.editor = K.create('#detail_desc', {    width: '98%',    height: '500px'   });  }); 

运行一下现在就可以看到kindeditor已经集成进来了。

如何在asp.net 中使用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;
  }
  /// 
 /// Kindeditor图片上传
  /// 
 /// Kindeditor图片上传自带的命名,不可更改名称
 /// 不可更改名称 这里没有用到dir
 /// 
 public IActionResult KindeditorPicUpload(IList 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参数


 //实例化编辑器
 //建议使用工厂方法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
  });
 }); 

看完上述内容,你们掌握如何在asp.net 中使用kindeditor实现一个图片上传功能的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


当前名称:如何在asp.net中使用kindeditor实现一个图片上传功能-创新互联
文章路径:http://ybzwz.com/article/ghpdd.html

其他资讯