应用富文字编写器提交照片案例详细说明
作者:jianzhan 发布时间:2021-02-14 02:40 来源:个人博客注册免费_简单免费自建app_免费个人主页_免费的个人网页_创建网站免费
本文摘要: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为整型不以标识符串,假如写出标识符串照片可以一切正常提交至网络服务器,可是不可以在访问器中回显。
谢谢阅读文章,期待能协助到大伙儿,感谢大伙儿对本网站的适用!
<<上一篇:自身建设网站怎样基本建设外链
下一篇:没有了 >>