KindEditor的檔案上傳外掛：

KindEditor 4.x 文件

具體實現步驟demo：

1.建立demo.jsp檔案，引入kindeditor的js檔案等，定義上傳檔案按鈕，這是一個div片段。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<div style="padding:10px 10px 10px 10px">
       <form id="addimages" class="itemForm" method="post">
        <table cellpadding="5"> 
                    <td>圖片:</td>
	            <td>
	            	 <a href="javascript:void(0)" class="easyui-linkbutton picFileUpload">上傳圖片</a>
	                 <input type="hidden" name="image"/>
	            </td>
	    </table>
	    <input type="hidden" name="itemParams"/>
	</form>
	<div style="padding:5px">
	    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
	    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>
	</div>
</div>
 

2.建立一個demon.js檔案，

var E3 = {
	// 編輯器引數
	kingEditorParams : {
		//指定上傳檔案引數名稱
		filePostName  : "uploadFile",
		//指定上傳檔案請求的url。
		uploadJson : '/pic/upload',
		//上傳型別，分別為image、flash、media、file
		dir : "image"
	},
    
    init : function(data){
    	// 初始化圖片上傳元件
    	this.initPicUpload(data);
    },
    // 初始化圖片上傳元件
    initPicUpload : function(data){
    	$(".picFileUpload").each(function(i,e){
    		var _ele = $(e);
    		_ele.siblings("div.pics").remove();
    		_ele.after('\
    			<div class="pics">\
        			<ul></ul>\
        		</div>');
    		// 回顯圖片
        	if(data && data.pics){
        		var imgs = data.pics.split(",");
        		for(var i in imgs){
        			if($.trim(imgs[i]).length > 0){
        				_ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='80' height='50' /></a></li>");
        			}
        		}
        	}
        	//給“上傳圖片按鈕”繫結click事件
        	$(e).click(function(){
        		var form = $(this).parentsUntil("form").parent("form");
        		//開啟圖片上傳視窗
        		KindEditor.editor(E3.kingEditorParams).loadPlugin('multiimage',function(){
        			var editor = this;
        			editor.plugin.multiImageDialog({
						clickFn : function(urlList) {
							var imgArray = [];
							KindEditor.each(urlList, function(i, data) {
								imgArray.push(data.url);
								form.find(".pics ul").append("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>");
							});
							form.find("[name=image]").val(imgArray.join(","));
							editor.hideDialog();
						}
					});
        		});
        	});
    	});
    },
};

3.在demo.jsp檔案中引入js檔案，呼叫init方法：

<script type="text/javascript">
	var itemAddEditor ;
	//頁面初始化完畢後執行此方法
	$(function(){
		//初始化類目選擇和圖片上傳器
		E3.init({fun:function(node){
		}});
	});
</script>

4.引數，返回值說明。

POST引數

    imgFile: 檔案form名稱
    dir: 上傳型別，分別為image、flash、media、file

返回格式(JSON)

//成功時
{
        "error" : 0,
        "url" : "http://www.example.com/path/to/file.ext"
}
//失敗時
{
        "error" : 1,
        "message" : "錯誤資訊"
}