码迷,mamicode.com
首页 > Web开发 > 详细

kindeditor编辑器上传图片

时间:2015-11-26 18:46:01      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:

使用的是asp.net MVC 上传图片。

1.下载Kindeditor的对应的包

2.html页面

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>UploadByKindeditor</title>


    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Content/KindEditor/kindeditor.js"></script>
    <script src="~/Content/KindEditor/plugins/image/image.js"></script>


    <script type="text/javascript">
        var editor;
        var options = {
            uploadJson: /BusinessPublic/UploadImage,   // (BusinessPublic,UploadImage为Action,下同) 上传图片
            fileManagerJson: /BusinessPublic/UploadFile,    //上传文件
            allowFileManager: true,
        width: "100%", //编辑器的宽度为100%
        height: "250px", //编辑器的高度为100px
        filterMode: false, //不会过滤HTML代码
        resizeMode: 1 //编辑器只能调整高度
        };
        $(function () {
            editor = KindEditor.create(#content, options);
        });
    </script>


</head>
<body>
    <div>
        
            内容:<textarea id="content" name="content" style="height:300px;"></textarea>
       
    </div>
</body>
</html>

 

3.后台Action代码: 使用post提交 (上传文件都是使用post方式)

        [HttpPost]
        public ActionResult UploadImage()
        {

            string savePath = "/Resource/KindeditorImage/";

            string fileTypes = "gif,jpg,jpeg,png,bmp";

            int maxSize = 1000000;

            Hashtable hash = new Hashtable();

            HttpPostedFileBase file = Request.Files["imgFile"];

            if (file == null)
            {

                hash = new Hashtable();

                hash["error"] = 0;

                hash["url"] = "请选择文件";

                return Json(hash);

            }


            string dirPath = Server.MapPath(savePath);

            if (!Directory.Exists(dirPath))
            {

                Directory.CreateDirectory(dirPath);


            }



            string fileName = file.FileName;

            string fileExt = Path.GetExtension(fileName).ToLower();



            ArrayList fileTypeList = ArrayList.Adapter(fileTypes.Split(,));



            if (file.InputStream == null || file.InputStream.Length > maxSize)
            {

                hash = new Hashtable();

                hash["error"] = 0;

                hash["url"] = "上传文件大小超过限制";

                return Json(hash);

            }



            if (string.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(,), fileExt.Substring(1).ToLower()) == -1)
            {

                hash = new Hashtable();

                hash["error"] = 0;

                hash["url"] = "上传文件扩展名是不允许的扩展名";

                return Json(hash);

            }



            string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;

            string filePath = dirPath + newFileName;

            file.SaveAs(filePath);

            //图片在服务器上的路径
            string fileUrl = savePath + newFileName;



            hash = new Hashtable();

            hash["error"] = 0;

            hash["url"] = fileUrl;



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

        }

 

PS:

通过KindEditor实现图片上传功能步骤:
 
(1)修改../plugins/image.js文件中fileName类型为file的name
 
 (2) 添加上传处理的URL:
 
 var editor;
     KindEditor.ready(function(K) {
 
         editor = K.create(‘#myeditor‘, 
 
        {
             uploadJson : ‘/uploadImg‘
         });
 
  });
 

(3)返回Json的信息:

 
//成功时 { "error" : 0, "url" : "http://www.example.com/path/to/file.ext" }
//失败时 { "error" : 1, "message" : "错误信息" }
 
以下为老版本设置方法(过时):
------------------------------------------------------------------------------------------------
 
(1)修改../plugins/image.html文件中input类型为file的name
 

(2)编写服务器端图片上传方法,要求返回的结果为JSON格式

 
(3)JSON格式要求为:
 
{"error":0,"message":".....","url":"/img/1111.gif"} 
 
其中当error值为0时表示上传成功,需要指定url值为图片保存后的URL地址,如果error值不为0,则设置message值为错误提示信息
 
(4)Html页面:
 
//编辑器初始化设置
 
KE.show({
    id : ‘editor‘,
    allowUpload : true, //允许上传图片
    imageUploadJson : ‘/saveImg‘ //服务端上传图片处理URI
});
 
//这里需要表单
<textarea id="editor" name="content" style="width:700px;height:300px;"></textarea>
 
 
(5)结束,就这么简单
 
注意:别忘了导入plugins/image文件夹,否则图片上传按钮无效。

 

kindeditor编辑器上传图片

标签:

原文地址:http://www.cnblogs.com/zoro-zero/p/4998349.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!