kindeditor java上传,Kindeditor富文本实现textarea文本域的上传及单独button 按钮绑定(用来实现单文件上传)...

在最近项目要新增一个内容文章，文章包含一般的正文内容，其中正文中可以包含多张图片、文章最多包含一个音频文件。文章正文的上传功能我是通过textarea文本域绑定kindeditor编辑器实现的，而单独音频文件的上传是通过button按钮绑定kindeditor编辑器实现。因为项目主的并发访问量很小，上传之后的图片和音频保存在项目服务器的静态文件中。

1、textarea文本域绑定kindeditor编辑器

JS代码如下：

$(function(){

KindEditor.ready(function(K) {

var editor = K.create('textarea[name='promoteContent']',{

height:"300px",

width:"650px",

cssPath:'${webPath}/plugin/kindeditor/plugins/code/prettify.css',

uploadJson:'${webPath}/plugin/kindeditor/upload_json.jsp', //文件上传

fileManagerJson:'${webPath}/plugin/kindeditor/file_manager_json.jsp',

allowImageRemote : false,

allowFileManager : true,

afterBlur:function(){

this.sync();//数据同步，此处一定要设置

}

});

});

});

html代码如下：

2、button按钮绑定kindeditor编辑器实现文件单独上传(也只能上传单独的文件)

JS代码如下：

$(function(){

KindEditor.ready(function(K) {

var audiobutton = K.uploadbutton({ 　　button : K('#audioUpload')[0], //audioUpload：需要绑定控件的button按钮Id值 　　 fieldName : 'imgFile', 　　url : '../jsp/upload_json.jsp', //修改upload_json.jsp,可以设置文件的保存路径，限制文件的上传格式和大小及相应的报错信息 　　afterUpload : function(data) { if (data.error === 0) { alert(data.url); //文件上传成功后进行的操作，可以进行html标签操作也可以进行kindeditor对象的操作

K("#audioUrL").val(data.url);//设置html的标签值，可用于将路径信息传到Java后端

var div = K("#audioShow"); //如下设置可用于上传文件在页面的回显

div.html("");　　　　　　　　　//div层的回显要先清空，才能控制只回显一个文件

div.append(""); //拼接div的回显标签

} else { alert(data.message);//文件上传失败的弹框提示信息(一般不修改) } } 　　　　}); 　　　　audiobutton.fileBox.change(function(e) { //此处需要注意和var变量名(audiobutton)一致 　　audiobutton.submit(); 　　　　});

});

});

html代码如下：

upload_json.jsp文件的编辑修改：

//文件保存目录路径

String savePath = "/resources/common/activity/files/";

//文件保存目录URL

String saveUrl =  "/eticket-resources/common/activity/files/";

//定义允许上传的文件扩展名(根据需要对文件类型进行设置)

HashMap extMap = new HashMap();

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");

//最大文件大小(10M：可修改)

long maxSize = 1024*1024*10;

//dirName用来修改存放文件的文件夹名称(此处背注释了原代码)

String dirName = request.getParameter("dir")==null?"img":"img";

/*

if (dirName == null) {

dirName = "img";

}

*/

//检查文件大小(提示语根据需要进行调整)

if(item.getSize() > maxSize){

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

return;

}

最终实现的页面效果如下：