ssh 使用 wangeditor3 富文本編輯器上傳圖片方法


這段時間在搞一個小網站的項目,其中有個功能是可以網頁上編輯文字和圖片,能一起上傳到數據庫然后在頁面上展現,當然還可以上傳附件,不過我現在還沒弄好,先把上傳圖片的功能記錄一下。
說到這個wangeditor3富文本編輯器,只能說自己才疏學淺被搞得頭暈,花了將近三四天才弄好這個簡單的上傳圖片功能= = 主要原因在於還不清楚普通上傳圖片的具體步驟,直接着手使用富文本編輯器來實現功能,而且這個wangeditor還以輕量級為特點,其文檔就沒有那么仔細,出現問題的時候我看網上也沒有太多的方法可尋,所以在此寫下這篇短敘以供自己和網友參考及回憶。話不多說,上代碼。

jsp頁面:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor demo</title>
</head>
<body>

<form id="newspost" method="post" action="newspost" namespace="/" enctype="multipart/form-data">

<input type="hidden" id="content" name="content"/>
<div style="padding: 5px 0; color: #ccc"></div>
<div id="editor"></div>
<br>
<input type="button" value="保存" onclick="subm()"></input>

</form>

<!-- 注意, 只需要引用 JS,無需引用任何 CSS !!!-->
<script type="text/javascript" src="${pageContext.request.contextPath }/wangEditor.min.js"></script>

<script type="text/javascript">
function subm(){

var title = document.getElementById('title').value;
document.getElementById('content').value=editor.txt.html();
document.getElementById('newspost').submit();
}
</script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
editor.customConfig.showLinkImg = false // 隱藏“網絡圖片”tab
editor.customConfig.uploadFileName = 'yourFileName' //給上傳的本地圖片文件命名的統一名稱
editor.customConfig.uploadImgServer = '/News/picload.action'//官方文檔上寫的是服務器地址,也就是上傳圖片的方法名

editor.customConfig.debug = true
editor.create()


</script>


</body>
</html>

上傳圖片方法:(參考的方法是wangeditor2文檔里的一種)

public void picload() throws Exception{

HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();

//創建上傳圖片存放的文件夾
String path = request.getServletContext().getRealPath("/image");
File file = new File(path);
if (!file.exists())
file.mkdirs();
String fileName = "";// 文件名稱

/**上傳文件處理內容**/
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload sfu = new ServletFileUpload(factory);
sfu.setHeaderEncoding("UTF-8"); // 處理中文問題
sfu.setSizeMax(1024 * 1024); // 限制文件大小
try {
List<FileItem> fileItems = sfu.parseRequest(request); // 解碼請求
System.out.println(fileItems);
for (FileItem fi : fileItems) {
fileName = UUID.randomUUID()+fi.getName().substring(fi.getName().lastIndexOf("."),fi.getName().length());
fi.write(new File(path, fileName));
}
} catch (Exception e) {
e.printStackTrace();
}

//獲取圖片url地址
System.out.println("fileName:"+fileName);
String imgUrl = "http://localhost:8080/News/image/" + fileName;
System.out.println("imgUrl:"+imgUrl);

//這里的data數據形式必須如此,返回的url地址才能匹配上wangeditor3的源程序要求
String data = "{errno: 0,data: ['" + imgUrl + "']}";
response.setContentType("text/text;charset=utf-8");
PrintWriter out = response.getWriter();
//這里需要用JSONObject轉一下String類型的數據,才能保證傳回去的數據是json格式的
JSONObject jsonObject = JSONObject.fromObject(data);
out.print(jsonObject.toString()); //返回url地址
out.flush();
out.close();

}

上面的java代碼中有個注意的點,就是解碼請求List<FileItem> fileItems = sfu.parseRequest(request); 意思是解析表單中的每一個表單項,封裝成FileItem對象,以List方式返回。剛開始不知道這里有問題,所以更加頭大,多處錯誤導致本就混亂的我瀕臨崩潰。debug后發現這個 fileItem 的值為空,於是上網搜索解決方法,有說是表單沒配這個屬性 enctype=”multipart/form-data” ,但不存在,我一開始用的就是這個。
然后有博客有寫到博客地址
這里springMVC 都為我們封裝好成自己的文件對象了,轉換的過程就在我們所配置的CommonsMultipartResolver這個轉換器里面下面再來看看它的源碼
這里寫圖片描述
他的轉換器里面就是調用common-fileupload的方式解析,然后再使用parseFileItems()方法封裝成自己的文件對象 .

List<FileItem> fileItems = ((ServletFileUpload) fileUpload).parseRequest(request); 

大家應該發現了上面的這句代碼,已經使用過fileUpload解析過request了,你在Controller里面接收到的request都已經是解析過的,你再次使用upload進行解析獲取到的肯定是空,這個就是問題的所在(大家可以在servlet里面實驗,看看第二次解析后能不能獲取到數據,當然是不能的)。
struts2把原始的原來S2為簡化上傳功能,把所有的enctype=”multipart/form-data”表單做了wrapper最后把HttpServletResquest封裝成 org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper
最后解決方案:
重寫parse方法,這樣就可以自己設置什么操作被struts2過濾處理,什么不被過濾處理。

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.dispatcher.multipart.JakartaMultiPartRequest;

public class MyMultiPartRequest extends JakartaMultiPartRequest{

@Override
public void parse(HttpServletRequest request, String arg1) throws IOException {
String url = request.getRequestURI().toString();//取得請求的URL
if(url.indexOf("picload.action")>0){//調用的是uploadWebApp.action方法
//不需要struts2的處理
}else{
//需要struts2的處理,調用回父類的方法
super.parse(request, arg1);
}
}

}

關於最后的json數據轉換,還有一點需要提,就是他需要加幾個jar包,
組裝和解析JSONObject的Json字符串,共需要下面六個包:
1、json-lib
2、commons-beanutils
3、commons-collections
4、commons-lang
5、commons-logging
6、ezmorph
其中commons-lang.jar包需要使用舊一點的版本,2.3,2.4,2.5好像都可以,只要其中有NestableRuntimeException.class就行,不然這個JSONObject jsonObject = JSONObject.fromObject(data); 會不報錯也不執行、、(有毒)
這里寫圖片描述
以下版本是我所使用的,可從網上找資源下載。
commons-lang-2.3.jar
commons-io-2.2.jar
commons-collections-3.2.1.jar
commons-fileupload-1.3.1.jar
commons-logging-1.2.jar
ezmorph-1.0.6.jar

哦還有一點,這個編輯器的123版本給用戶使用的變量大部分都不相同,各位網友記得仔細仔細再仔細、、、、、

大概就是這樣了,可能還有些問題,各位道友請多指教。
上傳附件功能等我弄出來之后再更、

好了,時隔…多日- -,終於搞出來,簡單的上傳下載附件功能也弄了好久,事情較多,然后沒有然后,都是借口哈哈哈哈哈


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com