在最近項目要新增一個內容文章，文章包含一般的正文內容，其中正文中可以包含多張圖片、文章最多包含一個音頻文件。文章正文的上傳功能我是通過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;
}
最終實現的頁面效果如下：
