富文本编辑器上传图片
一、导入kindeditor的js
二、将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('\
\ ');
// 回显图片
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("
");
}
}
}
//给“上传图片按钮”绑定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("
");
});
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为整型不为字符串，如果写成字符串图片能够正常上传至服务器，但是不能在浏览器中回显。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
