ASP. NET core integrated kindeditor for image upload function

This article for you to share the ASP. How to integrate kindeditor and implement the image upload function of the specific methods for your reference, the specific content as follows

Preparatory work

1.visual Studio UPDATE3 Development environment

2.net Core 1.0.1 and above

Directory

Create a new ASP. NET Core Web project

Download Kindeditor

Add Image Upload Controller

Configuring the Kindeditor parameter

Code download

Create a new ASP. NET Core Web project

Create a new ASP. NET Core project, named Kindeditor

Select the Web application

Download Kindeditor

Here we create a new system to bring the sample project, to kindeditor official website to download a version, unzip the copy of the big 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" >//Instantiation Editor// We recommend that you use the factory method Geteditor to create and reference the editor instance, and if you refer to 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 for a moment and you can see that kindeditor is integrated.

Add Image Upload Controller

Note that the return is a JSON object, so a simple object 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 images uploaded///</summary>//<param name= "imgfile" >kindeditor Pictures uploaded with name, non-changed name </param>//<param name= "dir" > Non-changing name is not used here dir</param>//<returns></returns> public Iactionresult kindeditorpicupload (ilist<iformfile> imgfile, string dir) {picuploadresponse RspJson = new PicUplo   Adresponse () {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 the Kindeditor parameter

<script type= "Text/javascript" >//Instantiation Editor//Use the factory method Geteditor to create and reference the editor instance, and if you reference the editor under a closure, call Ue.geteditor directly (' 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