這里以上傳圖片為例
-
先決條件
- 你已經(jīng)看完了上一篇 : 對(duì) ueditor 文件上傳的源碼的理解，因?yàn)槲沂鞘褂蒙弦黄拈_(kāi)發(fā)環(huán)境
-
修改前臺(tái)上傳圖片訪問(wèn)路徑
- 官方說(shuō)明：
-
新建 diyindex.html
- diyindex.html 代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>使用自己定義的上傳類(lèi)</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script> <!--建議手動(dòng)加在語(yǔ)言，避免在ie下有時(shí)因?yàn)榧虞d語(yǔ)言失敗導(dǎo)致編輯器加載失敗--> <!--這里加載的語(yǔ)言文件會(huì)覆蓋你在配置項(xiàng)目里添加的語(yǔ)言類(lèi)型，比如你在配置項(xiàng)目里配置的是英文，這里加載的中文，那最后就是中文--> <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script> <style type="text/css"> div{ width:100%; } </style> </head> <body> <div> <h1>使用自己定義的上傳類(lèi)</h1> <textarea id="editor" type="text/plain" style="width:1024px;height:500px;"></textarea> </div> <script type="text/javascript"> UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; UE.Editor.prototype.getActionUrl = function(action) { if (action == 'uploadimage' ) { return 'http://localhost:8080/_ueditor/UploadImageServlet'; } else { return this._bkGetActionUrl.call(this, action); } } var ue = UE.getEditor('editor'); </script> </body> </html>- 注意：
-
新建 UploadImageServlet 接受前段上傳請(qǐng)求、保存圖片、返回信息。
-
web.xml 中
-
UploadImageServlet 代碼
-
屬性
-
doPost 方法代碼
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("------- ueditor 圖片上傳 -------"); FileItemStream fileStream = null; boolean isAjaxUpload = request.getHeader( "X_Requested_With" ) != null; if (!ServletFileUpload.isMultipartContent(request)) { sendData( response, false, AppInfo.NOT_MULTIPART_CONTENT , null); return ; } ServletFileUpload upload = new ServletFileUpload( new DiskFileItemFactory()); if ( isAjaxUpload ) { upload.setHeaderEncoding( "UTF-8" ); } try { FileItemIterator iterator = upload.getItemIterator(request); while (iterator.hasNext()) { fileStream = iterator.next(); if (!fileStream.isFormField()) break; fileStream = null; } if (fileStream == null) { sendData( response, false, AppInfo.NOTFOUND_UPLOAD_DATA , null); return ; } // 得到 得到 新路徑格式+名稱(chēng)格式 String savePath = this.savePath; // 得到 原文件名 String originFileName = fileStream.getName(); // 得到 原文件名后綴 String suffix = FileType.getSuffixByFilename(originFileName); // 將 originFileName 去掉原文件名后綴 originFileName = originFileName.substring(0, originFileName.length() - suffix.length()); // 得到 新路徑格式+名稱(chēng)格式+后綴 savePath = savePath + suffix; // 得到 文件上傳大小限制，單位B int maxSize = this.maxSize; // 得到允許上傳的圖片格式數(shù)組 String[] allowTypes = this.allowTypes; if (!validType(suffix, allowTypes) ) { sendData( response, false, AppInfo.NOT_ALLOW_FILE_TYPE , null); return ; } // 根據(jù) 新路徑格式+名稱(chēng)格式+后綴 以及 原文件名 產(chǎn)生新的保存路徑和名稱(chēng) savePath = PathFormat.parse(savePath, originFileName); // 得到 保存至圖片服務(wù)器的 圖片訪問(wèn)路徑前綴 String rootPath = request.getSession().getServletContext().getRealPath( "/" ); rootPath = rootPath.substring( 0 , rootPath.length() ); String physicalPath = rootPath + savePath; // 將上傳圖片保存至 硬盤(pán) InputStream is = fileStream.openStream(); State storageState = StorageManager.saveFileByInputStream(is, physicalPath , maxSize); is.close(); if (storageState.isSuccess()) { storageState.putInfo("url", PathFormat.format(savePath)); storageState.putInfo("type", suffix); storageState.putInfo("original", originFileName + suffix); } sendData( response, true, 0 , storageState); return ; } catch (FileUploadException e) { sendData( response, false, AppInfo.PARSE_REQUEST_ERROR , null); return ; } catch (IOException e) { } sendData( response, false, AppInfo.IO_ERROR , null); return ; } -
其他方法
-
-
-
注意
UploadImageServlet 中的
// 圖片服務(wù)器保存路徑前綴 private String rootPath = "";與 config.json 中的
需要按需配置！
