使用富文本编辑器上传图片实例详解
富文本编辑器上传图片
一、导入kindeditor的js
<scripttype="text/javascript"charset="utf-8"src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script> <scripttype="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");
}});
三、设置要上传的参数
varTT=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('\
<divclass="pics">\
<ul></ul>\
</div>');
//回显图片
if(data&&data.pics){
varimgs=data.pics.split(",");
for(variinimgs){
if($.trim(imgs[i]).length>0){
_ele.siblings(".pics").find("ul").append("<li><ahref='"+imgs[i]+"'target='_blank'><imgsrc='"+imgs[i]+"'width='80'height='50'/></a></li>");
}
}
}
//给“上传图片按钮”绑定click事件
$(e).click(function(){
varform=$(this).parentsUntil("form").parent("form");
//打开图片上传窗口
KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){
vareditor=this;
editor.plugin.multiImageDialog({
clickFn:function(urlList){
varimgArray=[];
KindEditor.each(urlList,function(i,data){
imgArray.push(data.url);
form.find(".picsul").append("<li><ahref='"+data.url+"'target='_blank'><imgsrc='"+data.url+"'width='80'height='50'/></a></li>");
});
form.find("[name=image]").val(imgArray.join(","));
editor.hideDialog();
}
});
});
});
});
服务端代码
publicMapuploadPicture(MultipartFileuploadFile){
MapresultMap=newHashMap<>();
try{
//生成一个新的文件名
//去原始文件名
StringoldName=uploadFile.getOriginalFilename();
//生成新的文件名
//UUID.randomUUID();
StringnewName=IDUtils.genImageName();
newName=newName+oldName.substring(oldName.lastIndexOf("."));
StringimagePath=newDateTime().toString("/yyyy/MM/dd");
//上传图片
booleanresult=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");
returnresultMap;
}
resultMap.put("error",0);
resultMap.put("url",IMAGE_BASE_PATH+imagePath+"/"+newName);
returnresultMap;
}catch(IOExceptione){
resultMap.put("error",1);
resultMap.put("message","文件上传异常");
returnresultMap;
}
}
注意：服务端返回的json串的格式{error:0|1,message|url}其中error为整型不为字符串，如果写成字符串图片能够正常上传至服务器，但是不能在浏览器中回显。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！