使用Kindeditor上传图片

　　给客户制作的项目中需要添加富文本，从网上看了一下很多人推荐kindeditor这个编辑器，用了之后也感觉不错，有一些问题的就是上传图片的时候遇到了一些问题，在这里记录一下，也方便以后查看。

　　首先在官网下载kindeditor压缩包，（我这里用的是kindedito-4.1.7），解压开，把jsp、 plugins、skins、kindeditor.js 、kindedditor-min.js放进自己的项目中（我是放在webroot下面新建的文件夹kindeditor下面的），其他的可以不放。

　　下载的压缩包中有demo我们可以参考一下，upload_json.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ page import="java.util.*,java.io.*" %>

<%@ page import="java.text.SimpleDateFormat" %>

<%@ page import="org.apache.commons.fileupload.*" %>

<%@ page import="org.apache.commons.fileupload.disk.*" %>

<%@ page import="org.apache.commons.fileupload.servlet.*" %>

<%@ page import="org.json.simple.*" %>

<%





//文件保存目录路径

String savePath = pageContext.getServletContext().getRealPath("/") + "attached/";



//文件保存目录URL

String saveUrl  = request.getContextPath() + "/attached/";



//定义允许上传的文件扩展名

HashMap<String, String> extMap = new HashMap<String, String>();

extMap.put("image", "gif,jpg,jpeg,png,bmp");

extMap.put("flash", "swf,flv");

extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");

extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");



//最大文件大小

long maxSize = 1000000;



response.setContentType("text/html; charset=UTF-8");



if(!ServletFileUpload.isMultipartContent(request)){

    out.println(getError("请选择文件。"));

    return;

}

//检查目录

File uploadDir = new File(savePath);

if(!uploadDir.isDirectory()){

    out.println(getError("上传目录不存在。"));

    return;

}

//检查目录写权限

if(!uploadDir.canWrite()){

    out.println(getError("上传目录没有写权限。"));

    return;

}



String dirName = request.getParameter("dir");

if (dirName == null) {

    dirName = "image";

}

if(!extMap.containsKey(dirName)){

    out.println(getError("目录名不正确。"));

    return;

}

//创建文件夹

savePath += dirName + "/";

saveUrl += dirName + "/";

File saveDirFile = new File(savePath);

if (!saveDirFile.exists()) {

    saveDirFile.mkdirs();

}

SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");

String ymd = sdf.format(new Date());

savePath += ymd + "/";

saveUrl += ymd + "/";

File dirFile = new File(savePath);

if (!dirFile.exists()) {

    dirFile.mkdirs();

}



FileItemFactory factory = new DiskFileItemFactory();

ServletFileUpload upload = new ServletFileUpload(factory);

upload.setHeaderEncoding("UTF-8");

List items = upload.parseRequest(request);

Iterator itr = items.iterator();

while (itr.hasNext()) {

    FileItem item = (FileItem) itr.next();

    String fileName = item.getName();

    long fileSize = item.getSize();

    if (!item.isFormField()) {

        //检查文件大小

        if(item.getSize() > maxSize){

            out.println(getError("上传文件大小超过限制。"));

            return;

        }

        //检查扩展名

        String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();

        if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){

            out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));

            return;

        }



        SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");

        String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;

        try{

            File uploadedFile = new File(savePath, newFileName);

            item.write(uploadedFile);

        }catch(Exception e){

            out.println(getError("上传文件失败。"));

            return;

        }



        JSONObject obj = new JSONObject();

        obj.put("error", 0);

        obj.put("url", saveUrl + newFileName);

        out.println(obj.toJSONString());

    }

}

%>

<%!

private String getError(String message) {

    JSONObject obj = new JSONObject();

    obj.put("error", 1);

    obj.put("message", message);

    return obj.toJSONString();

}

%>

　　在我们使用kindeditor的页面添加如下代码，其中item是选项卡，这里根据自己的需要添加选项。

<script charset="utf-8" src="../js/kindeditor-4.1.7/kindeditor.js"></script>

<script charset="utf-8" src="../js/kindeditor-4.1.7/lang/zh_CN.js"></script>



KindEditor.ready(function(K) {

                window.editor = K.create('#editor_id', {



                    items : ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',

        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',

        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',

        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',

        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',

        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',

        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',

        'anchor', 'link', 'unlink', '|', 'about'],afterChange : function() {

this.sync();

}

                }

                );

        });

　　然后修改Plugins——>image——>image.js

　　将其中的

　　uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php'),

　　修改为

　　uploadJson = K.undef(self.uploadJson, self.basePath + 'jsp/upload_json.jsp'),

 　　最后不要忘记在我们tomcat目录下新建一个名为attached的目录来存放我们的图片。之所以取名为attached是因为在upload_json.jsp中默认存储图片的文件夹名为attached。自己的这个方法也是摸索着来，希望能够和大家交流。

 

作者： 杰瑞教育
出处： http://www.cnblogs.com/jerehedu/ 
本文版权归烟台杰瑞教育科技有限公司和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。