Usage of the KindeEditor Image Upload plug-in

Usage of the KindeEditor Image Upload plug-in

Image uploading is sometimes a headache for some new users. Today, I will share the KindeEditor plug-in used in the project. It takes minutes to upload images and files, the configuration is simple. Now let's share it;

KindeEditor official Api documentation: http://kindeditor.net/doc.php

To use this plug-in, we first need to download it from the official website. After the download is complete, we will put the plug-in into our project,

 

The next step is how to use the plug-in on the front end. I don't need to talk about the code here:

1 @ {2 ViewBag. Title = "KindeEditor Image Upload"; 3} 4 
Method for uploading images in the background UploadImage:
1 [HttpPost] 2 public ActionResult UploadImage () 3 {4 // file storage Path 5 const string savePath = "/Content/Images /"; 6 // Upload File Type 7 const string fileTypes = "gif, jpg, jpeg, png, bmp"; 8 // Upload File Size 9 const int maxSize = 10000000; 10 11 var hash = new Hashtable (); 12 // get file information 13 HttpPostedFileBase file = Request. files ["imgFile"]; 14 if (file = null) 15 {16 hash = new Hashtable (); 17 hash ["error"] = 1; 18 hash ["message"] = "Select file"; 19 return Json (hash, "text/html; charset = UTF-8"); 20} 21 22 string dirPath = Server. mapPath (savePath); 23 if (! Directory. exists (dirPath) 24 {25 // if this Directory does not exist, a 26 Directory is created. createDirectory (dirPath); 27 // hash = new Hashtable (); 28 // hash ["error"] = 1; 29 // hash ["message"] = "the upload directory does not exist"; 30 // return Json (hash, "text/html; charset = UTF-8 "); 31} 32 33 string fileName = file. fileName; 34 string fileExt = Path. getExtension (fileName ). toLower (); 35 // file size judgment 36 if (file. inputStream = null | file. inputStream. length> maxSize) 37 {38 hash = new Hashtable (); 39 hash ["error"] = 1; 40 hash ["message"] = "the size of the uploaded file exceeds the limit "; 41 return Json (hash, "text/html; charset = UTF-8"); 42} 43 44 if (string. isNullOrEmpty (fileExt) | Array. indexOf (fileTypes. split (','), fileExt. substring (1 ). toLower () =-1) 45 {46 hash = new Hashtable (); 47 hash ["error"] = 1; 48 hash ["message"] = "Upload file extension is not allowed extension"; 49 return Json (hash, "text/html; charset = UTF-8 "); 50} 51 52 var newFileName = DateTime. now. toString ("yyyyMMddHHmmss", DateTimeFormatInfo. invariantInfo) + fileExt; 53 var filePath = dirPath + newFileName; 54 file. saveAs (filePath); 55 var fileUrl = savePath + newFileName; 56 57 hash = new Hashtable (); 58 hash ["error"] = 0; 59 hash ["url"] = fileUrl; 60 60 61 return Json (hash, "text/html; charset = UTF-8"); 62}
Now that everything is done, let's take a look at the effect:


 

 
Reprinted please indicate Source: http://www.cnblogs.com/izhaofu/p/4754764.html