java富文本传图片_使用富文本编辑器上传图片实例详解

富文本编辑器上传图片

一、导入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为整型不为字符串，如果写成字符串图片能够正常上传至服务器，但是不能在浏览器中回显。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！