asp.net core集成kindeditor實(shí)現(xiàn)圖片上傳功能

來源：懂視網(wǎng) 責(zé)編：小OO 時(shí)間：2020-11-27 22:36:24

asp.net core集成kindeditor實(shí)現(xiàn)圖片上傳功能

本文為大家分享了asp.net core 如何集成kindeditor并實(shí)現(xiàn)圖片上傳功能的具體方法，供大家參考，具體內(nèi)容如下：準(zhǔn)備工作；1.visual studio 2015 update3開發(fā)環(huán)境。2.net core 1.0.1 及以上版本。目錄；新建asp.net core web項(xiàng)目。下載kindeditor。增加圖片上傳控制器；配置kindeditor參數(shù)。代碼下載；新建asp.net core web項(xiàng)目。新建一個(gè)asp.net core項(xiàng)目，這里命名為kindeditor。選中web應(yīng)用程序；下載kindeditor。這里我們新建了一個(gè)系統(tǒng)自帶的樣本項(xiàng)目，去 kindeditor官網(wǎng)下載一個(gè)版本，解壓后拷貝大wwwroot中。修改views/index.cshtml。

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀本文為大家分享了asp.net core 如何集成kindeditor并實(shí)現(xiàn)圖片上傳功能的具體方法，供大家參考，具體內(nèi)容如下：準(zhǔn)備工作；1.visual studio 2015 update3開發(fā)環(huán)境。2.net core 1.0.1 及以上版本。目錄；新建asp.net core web項(xiàng)目。下載kindeditor。增加圖片上傳控制器；配置kindeditor參數(shù)。代碼下載；新建asp.net core web項(xiàng)目。新建一個(gè)asp.net core項(xiàng)目，這里命名為kindeditor。選中web應(yīng)用程序；下載kindeditor。這里我們新建了一個(gè)系統(tǒng)自帶的樣本項(xiàng)目，去 kindeditor官網(wǎng)下載一個(gè)版本，解壓后拷貝大wwwroot中。修改views/index.cshtml。

本文為大家分享了asp.net core 如何集成kindeditor并實(shí)現(xiàn)圖片上傳功能的具體方法，供大家參考，具體內(nèi)容如下

準(zhǔn)備工作

1.visual studio 2015 update3開發(fā)環(huán)境

2.net core 1.0.1 及以上版本

新建asp.net core web項(xiàng)目

下載kindeditor

增加圖片上傳控制器

配置kindeditor參數(shù)

代碼下載

新建asp.net core web項(xiàng)目

新建一個(gè)asp.net core項(xiàng)目，這里命名為kindeditor

選中web應(yīng)用程序

下載kindeditor

這里我們新建了一個(gè)系統(tǒng)自帶的樣本項(xiàng)目，去 kindeditor官網(wǎng)下載一個(gè)版本，解壓后拷貝大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">
 //實(shí)例化編輯器
 //建議使用工廠方法getEditor創(chuàng)建和引用編輯器實(shí)例，如果在某個(gè)閉包下引用該編輯器，直接調(diào)用UE.getEditor('editor')就能拿到相關(guān)的實(shí)例
 KindEditor.ready(function (K) {
 window.editor = K.create('#detail_desc', {
 width: '98%',
 height: '500px'
 });
 }); 
</script>

運(yùn)行一下現(xiàn)在就可以看到kindeditor已經(jīng)集成進(jìn)來了。

增加圖片上傳控制器

注意返回是一個(gè)json對(duì)象，因此建了一個(gè)簡(jiǎn)單的對(duì)象返回。

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();
 //這里是業(yè)務(wù)邏輯
 }
 }
 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參數(shù)

<script type="text/javascript">
 //實(shí)例化編輯器
 //建議使用工廠方法getEditor創(chuàng)建和引用編輯器實(shí)例，如果在某個(gè)閉包下引用該編輯器，直接調(diào)用UE.getEditor('editor')就能拿到相關(guān)的實(shí)例
 KindEditor.ready(function (K) {
 window.editor = K.create('#detail_desc', {
 width: '98%',
 height: '500px',
 uploadJson: '/home/KindeditorPicUpload',
 fileManagerJson: '/home/KindeditorPicUpload',
 allowFileManager: true
 });
 }); 
</script>

運(yùn)行效果