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

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

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

JS代码如下：

　　<script type="text/javascript">
　　　　$(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();//数据同步，此处一定要设置

　　　　　　　　　　　　}

　　　　　　　　});

　　　　　　});

 

　　　　});

　　</script>

html代码如下：

　　<textarea name="promoteContent" id="promoteContent" style="width:100%;height:100%"></textarea>

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

JS代码如下：

　<script type="text/javascript">

　　$(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("<embed  src='"+data.url+"' />"); //拼接div的回显标签

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

　　});

});

　</script>

html代码如下：

　　<div>

　　　　<div id="inputbox">

　　　　　　<input type="text" name=“audioUrL” id=“audioUrL” placeholder="请选择本地音频文件" >

　　　　　　<input type="button" id=“audioUpload” value="请选择">

　　　　</div>　　

　　　　<div id="audioShow">

　　　　</div>

　　<div>

upload_json.jsp文件的编辑修改：

　　//文件保存目录路径
　　String savePath = "/resources/common/activity/files/";

　　//文件保存目录URL
　　String saveUrl =  "/eticket-resources/common/activity/files/";　

　　//定义允许上传的文件扩展名(根据需要对文件类型进行设置)
　　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");　

　　//最大文件大小(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;
　　}

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