首页 > 代码库 > KindeEditor图片上传插件用法
KindeEditor图片上传插件用法
因业务需要找了款插件 KindeEditor编辑器确认挺好用，但无奈技术有限，上传配置不知，故问度娘！
图片上传对于部分新手来说有时候是一件非常头疼的事，今天来分享一下项目中使用到的这个插件KindeEditor；对于图片上传、文件上传都是分分钟搞定的事，配置简单；现在来分享一下；
KindeEditor官网Api文档：http://kindeditor.net/doc.php
要想使用此插件我们首先就要去官网下载，下载完成后将插件放进我们的项目当中，如图：
接着就是前端如何使用该插件，同样废话不多说直接上代码：
1 @{
2 ViewBag.Title = "KindeEditor图片上传";
3 }
4 <h2>KindeEditor图片上传</h2>
5 <link href="~/Scripts/kindeditor/themes/default/default.css" rel="stylesheet" />
6 <input type="button" value="上传" id="chooseImage" />
7 <img id="imgbox" src="#" style="display: none"/>
8
9 <script src="~/Scripts/jquery-1.8.2.min.js"></script>
10 <script src="~/Scripts/kindeditor/kindeditor-min.js"></script>
11 <script src="~/Scripts/kindeditor/lang/zh_CN.js"></script>
12 <script type="text/javascript">
13 KindEditor.ready(function (K) {
14 var editor = K.editor({
15 uploadJson: ‘/Home/UploadImage‘,
16 allowFileManager: false //允许图片管理 开启后再挑选图片的时候可以直接从图片空间内挑选
17 });
18
19 K(‘#chooseImage‘).click(function () {
20 editor.loadPlugin(‘image‘, function () {
21 editor.plugin.imageDialog({
22 showRemote: false,
23 imageUrl: K(‘#PicUrl‘).val(),
24 clickFn: function (url, message, error) {
25 alert("上传成功!");
26 K("#imgbox").attr("src", url);
27 K("#imgbox").show();
28 editor.hideDialog();
29 }
30 });
31 });
32 });
33 });
34 </script>
后台上传图片的方法UploadImage：
1 [HttpPost]
2 public ActionResult UploadImage()
3 {
4 //文件保存路径
5 const string savePath = "/Content/Images/";
6 //上传文件类型
7 const string fileTypes = "gif,jpg,jpeg,png,bmp";
8 //上传文件大小
9 const int maxSize = 10000000;
10
11 var hash = new Hashtable();
12 //获取文件信息
13 HttpPostedFileBase file = Request.Files["imgFile"];
14 if (file == null)
15 {
16 hash = new Hashtable();
17 hash["error"] = 1;
18 hash["message"] = "请选择文件";
19 return Json(hash, "text/html;charset=UTF-8");
20 }
21
22 string dirPath = Server.MapPath(savePath);
23 if (!Directory.Exists(dirPath))
24 {
25 //不存在该目录则创建一个
26 Directory.CreateDirectory(dirPath);
27 //hash = new Hashtable();
28 //hash["error"] = 1;
29 //hash["message"] = "上传目录不存在";
30 //return Json(hash, "text/html;charset=UTF-8");
31 }
32
33 string fileName = file.FileName;
34 string fileExt = Path.GetExtension(fileName).ToLower();
35 //文件大小判断
36 if (file.InputStream == null || file.InputStream.Length > maxSize)
37 {
38 hash = new Hashtable();
39 hash["error"] = 1;
40 hash["message"] = "上传文件大小超过限制";
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"] = "上传文件扩展名是不允许的扩展名";
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
61 return Json(hash, "text/html;charset=UTF-8");
62 }
到此一切都做好了，下面就来看看效果：
转载请注明来源：http://www.cnblogs.com/izhaofu/p/4754764.html
KindeEditor图片上传插件用法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。