应用富文字编写器提交照片案例详细说明
本文摘要: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开展关
 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 \
 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为整型不以标识符串,假如写出标识符串照片可以一切正常提交至网络服务器,可是不可以在访问器中回显。

谢谢阅读文章,期待能协助到大伙儿,感谢大伙儿对本网站的适用!