KindeEditor图片上传插件用法

　　　图片上传对于部分新手来说有时候是一件非常头疼的事，今天来分享一下项目中使用到的这个插件KindeEditor；对于图片上传、文件上传都是分分钟搞定的事，配置简单；现在来分享一下；

　　　KindeEditor官网Api文档：http://kindeditor.net/doc.php

　　　要想使用此插件我们首先就要去官网下载，下载完成后将插件放进我们的项目当中，如图：

 

　　接着就是前端如何使用该插件，同样废话不多说直接上代码：

@{
    ViewBag.Title = "KindeEditor图片上传";
}
<h2>KindeEditor图片上传</h2>
<link href="~/Scripts/kindeditor/themes/default/default.css" rel="stylesheet" />
<input type="button" value="上传" id="chooseImage" />
<img id="imgbox" src="#" style="display: none"/>

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/kindeditor/kindeditor-min.js"></script>
<script src="~/Scripts/kindeditor/lang/zh_CN.js"></script>
<script type="text/javascript">
    KindEditor.ready(function (K) {
        var editor = K.editor({
            uploadJson: '/Home/UploadImage',
            allowFileManager: false
        });

        K('#chooseImage').click(function () {
            editor.loadPlugin('image', function () {
                editor.plugin.imageDialog({
                    showRemote: false,
                    imageUrl: K('#PicUrl').val(),
                    clickFn: function (url, message, error) {
                        alert("上传成功!");
                        K("#imgbox").attr("src", url);
                        K("#imgbox").show();
                        editor.hideDialog();
                    }
                });
            });
        });
    });
</script>

　　后台上传图片的方法UploadImage：

[HttpPost]
        public ActionResult UploadImage()
        {
            //文件保存路径
            const string savePath = "/Content/Images/";
            //上传文件类型
            const string fileTypes = "gif,jpg,jpeg,png,bmp";
            //上传文件大小
            const int maxSize = 10000000;

            var hash = new Hashtable();
            //获取文件信息
            HttpPostedFileBase file = Request.Files["imgFile"];
            if (file == null)
            {
                hash = new Hashtable();
                hash["error"] = 1;
                hash["message"] = "请选择文件";
                return Json(hash, "text/html;charset=UTF-8");
            }

            string dirPath = Server.MapPath(savePath);
            if (!Directory.Exists(dirPath))
            {
                //不存在该目录则创建一个
                Directory.CreateDirectory(dirPath); 
                //hash = new Hashtable();
                //hash["error"] = 1;
                //hash["message"] = "上传目录不存在";
                //return Json(hash, "text/html;charset=UTF-8");
            }

            string fileName = file.FileName;
            string fileExt = Path.GetExtension(fileName).ToLower();
            //文件大小判断
            if (file.InputStream == null || file.InputStream.Length > maxSize)
            {
                hash = new Hashtable();
                hash["error"] = 1;
                hash["message"] = "上传文件大小超过限制";
                return Json(hash, "text/html;charset=UTF-8");
            }

            if (string.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1)
            {
                hash = new Hashtable();
                hash["error"] = 1;
                hash["message"] = "上传文件扩展名是不允许的扩展名";
                return Json(hash, "text/html;charset=UTF-8");
            }

            var newFileName = DateTime.Now.ToString("yyyyMMddHHmmss", DateTimeFormatInfo.InvariantInfo) + fileExt;
            var filePath = dirPath + newFileName;
            file.SaveAs(filePath);
            var fileUrl = savePath + newFileName;

            hash = new Hashtable();
            hash["error"] = 0;
            hash["url"] = fileUrl;

            return Json(hash, "text/html;charset=UTF-8");
        }

到此一切都做好了，下面就来看看效果：

 

 

转载请注明来源：http://www.cnblogs.com/izhaofu/p/4754764.html