富文本編輯器上傳圖片
一、導入kindeditor的js
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>
二、將kindeditor與一個文本域textarea進行關聯，即用textarea初始化一個kindeditor對象
itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");
//初始化類目選擇和圖片上傳器
TAOTAO.init({fun:function(node){
TAOTAO.changeItemParam(node, "itemAddForm");
}});
三、設置要上傳的參數
var TT = TAOTAO = {
// 編輯器參數
kingEditorParams : {
//指定上傳文件參數名稱
filePostName : "uploadFile",
//指定上傳文件請求的url。
uploadJson : '/pic/upload',
//上傳類型，分別為image、flash、media、file
dir : "image"
},
init : function(data){
// 初始化圖片上傳組件
this.initPicUpload(data);
// 初始化選擇類目組件
this.initItemCat(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(TT.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();
}
});
});
});
});
服務端代碼
public Map uploadPicture(MultipartFile uploadFile) {
Map resultMap=new HashMap>();
try {
//生成一個新的文件名
//去原始文件名
String oldName=uploadFile.getOriginalFilename();
//生成新的文件名
//UUID.randomUUID();
String newName=IDUtils.genImageName();
newName=newName+oldName.substring(oldName.lastIndexOf("."));
String imagePath=new DateTime().toString("/yyyy/MM/dd");
//上傳圖片
boolean result=FtpUtil.uploadFile(FTP_ADDRESS,FTP_PORT, FTP_USERNAME, FTP_PASSWORD, FTP_BASE_PATH,
imagePath, newName, uploadFile.getInputStream());
System.out.println("result="+result);
if(!result){
resultMap.put("error", 1);
resultMap.put("message", "文件上傳失敗");
System.out.println("hh");
return resultMap;
}
resultMap.put("error", 0);
resultMap.put("url", IMAGE_BASE_PATH + imagePath + "/" + newName);
return resultMap;
} catch (IOException e) {
resultMap.put("error", 1);
resultMap.put("message", "文件上傳異常");
return resultMap;
}
}
注意：服務端返回的json串的格式{error: 0|1,message|url} 其中error為整型不為字符串，如果寫成字符串圖片能夠正常上傳至服務器，但是不能在瀏覽器中回顯。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
