使用富文本編輯器上傳圖片實(shí)例詳解
富文本編輯器上傳圖片
一、導(dǎo)入kindeditor的js
<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與一個(gè)文本域textarea進(jìn)行關(guān)聯(lián),即用textarea初始化一個(gè)kindeditor對(duì)象
itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]"); //初始化類目選擇和圖片上傳器 TAOTAO.init({fun:function(node){ TAOTAO.changeItemParam(node, "itemAddForm"); }});
三、設(shè)置要上傳的參數(shù)
var TT = TAOTAO = { // 編輯器參數(shù) kingEditorParams : { //指定上傳文件參數(shù)名稱 filePostName : "uploadFile", //指定上傳文件請(qǐng)求的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 class="pics">\ <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(); } }); }); }); });
服務(wù)端代碼
public Map uploadPicture(MultipartFile uploadFile) { Map resultMap=new HashMap<>(); try { //生成一個(gè)新的文件名 //去原始文件名 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; } }
注意:服務(wù)端返回的json串的格式{error: 0|1,message|url} 其中error為整型不為字符串,如果寫成字符串圖片能夠正常上傳至服務(wù)器,但是不能在瀏覽器中回顯。
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
JSP 開發(fā)之THE SERVLET NAME ALREADY EXISTS.解決方法
這篇文章主要介紹了JSP 開發(fā)之THE SERVLET NAME ALREADY EXISTS.解決方法的相關(guān)資料,希望通過(guò)本文大家能解決這樣的問(wèn)題,需要的朋友可以參考下2017-09-09JSP動(dòng)態(tài)生成驗(yàn)證碼存儲(chǔ)在session作用范圍內(nèi)
下面的代碼實(shí)現(xiàn)的功能:寫一個(gè)JSP頁(yè),動(dòng)態(tài)生成一個(gè)驗(yàn)證碼,存儲(chǔ)在session作用范圍內(nèi),并以圖像形式返回給客戶端顯示2014-09-09jsp無(wú)法提交nicEdit中的內(nèi)容的解決方法
之前在測(cè)試頁(yè)面功能時(shí),發(fā)現(xiàn)在input type=“text”的輸入欄中按下回車鍵時(shí),會(huì)導(dǎo)致form表單的自動(dòng)提交,遂將提交按鈕由submit類型改為button類型。這樣雖然解決了表單自動(dòng)提交的問(wèn)題,但是卻導(dǎo)致了新問(wèn)題的出現(xiàn),即表單中的nicEdit的值無(wú)法被提交了。下邊是解決的方法,需要的朋友請(qǐng)往下看2013-03-03Java從服務(wù)器上獲取時(shí)間動(dòng)態(tài)顯示在jsp頁(yè)面實(shí)現(xiàn)思路
Java只能獲取一次,到頁(yè)面的時(shí)間是靜態(tài)的,不過(guò)通過(guò)js和Java的合作,巧妙地實(shí)現(xiàn)此功能2013-08-08