asp.net core integrated kindeditor realize picture upload function _ Practical skills

This article has shared the ASP.net core how to integrate Kindeditor and realizes the picture to upload the function the concrete method, for everybody reference, the concrete content is as follows

Preparatory work

1.visual Studio 2015 UPDATE3 Development Environment

2.net Core 1.0.1 and above

Directory

New ASP.net core Web project

Download Kindeditor

Add Picture Upload Controller

Configuring Kindeditor Parameters

Code download

New ASP.net core Web project

Create a new ASP.net core project, which is named Kindeditor

Select Web Application

Download Kindeditor

Here we have a new system from the sample project, to kindeditor official website to download a version, decompression after the copying of large wwwroot

Modify 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" >
 //Instantiate editor/
 / It is recommended that you use the factory method Geteditor to create and reference an editor instance, and if you reference the editor under a closure, call Ue.geteditor (' editor ') directly to get the relevant instance
 Kindeditor.ready (function ( K) {
  window.editor = k.create (' #detail_desc ', {
   width: ' 98% ',
   height: ' 500px '
  } 
); </script>

Run it now to see that the Kindeditor has been integrated in.

Add Picture Upload Controller

Note that the return is a JSON object, so a simple object return is built.

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 image upload
  /// </ summary>
 /// <param name = "imgFile"> Kindeditor comes with a name that comes with the picture upload, you cannot change the name </ param>
 /// <param name = "dir"> Unchangeable name dir is not used here </ 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 ();
     // here is the business logic
    }
   }
   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;}
 }
} 

Configuring Kindeditor Parameters

<script type= "Text/javascript" >/
 /Instantiation Editor
 //recommended to use the factory method Geteditor Create and reference an editor instance, if the editor is referenced under a closure, Directly call Ue.geteditor (' editor ') to get the relevant instance
 Kindeditor.ready (function (K) {
  window.editor = k.create (' #detail_ Desc ', {
   width: ' 98% ',
   height: ' 500px ',
   uploadjson: '/home/kindeditorpicupload ',
   Filemanagerjson: '/home/kindeditorpicupload ',
   allowfilemanager:true
  }); 
</script>

Run effect

SOURCE Download: Http://xiazai.jb51.net/201611/yuanma/ASP.NETkindeditor (jb51.net). rar

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.