前端:umeditor.config.js默认不需要修改
Image.js修改submit方法(用于解决请求跨域的问题):
submit: function (callback) { var me = this, input = $( '<input style="filter: alpha(opacity=0);" class="edui-image-file" type="file" hidefocus="" name="upfile" accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp">'), input = input[0]; $(me.dialog).delegate( ".edui-image-file", "change", function ( e ) { if ( !this.parentNode ) { return; } var xhr = new XMLHttpRequest(); xhr.open("post", me.editor.getOpt('imageUrl') + "?type=ajax", true); //xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); var fd = new FormData(); fd.append(me.editor.getOpt('imageFieldName'), event.target.files[0]); xhr.send(fd); xhr.addEventListener('load', function (e) { var r = e.target.response, json; me.uploadComplete(r); $(this).unbind('load'); $(this).remove(); }); Upload.updateInput( input ); me.toggleMask("Loading...."); callback && callback(); }); return me; },
Html:
<!--style给定宽度可以影响编辑器的最终宽度--> <div class="layui-form-item" id="addPowersToDocumentPage" style="display:none;"> <form class="layui-form layui-form-pane" action="" lay-filter="addPowersToDocumentForm" id="addPowersToDocumentForm"> <input type="hidden" name="documentId"/> <div type="text/plain" id="addPowersToDocument" name="content" style="width:1000px;height:240px;"> </div> <div class="layui-form-item"> <button type="button" id="addPowersToDocumentSubmit" lay-filter="addPowersToDocumentSubmit" style="display:none" lay-submit></button> </div> </form> </div> <script type="text/javascript"> window.UMEDITOR_HOME_URL = servicePath + "/back/upload/"; //实例化编辑器 var um = UM.getEditor('addPowersToDocument', { imageUrl: servicePath + '/back/upload?charset=utf-8&loginCode=' + adminInfo.loginCode, /**图片上传执行action**/ imagePath: servicePath, /**图片网络显示路径**/ focus: true }); var umEdit = UM.getEditor('addPowersToDocumentEdit', { imageUrl: servicePath + '/back/upload', /**图片上传执行action**/ imagePath: servicePath, /**图片网络显示路径**/ focus: true }); var umView = UM.getEditor('addPowersToDocumentView', { imageUrl: servicePath + '/back/upload', /**图片上传执行action**/ imagePath: servicePath, /**图片网络显示路径**/ focus: true }); </script>
控制层:
package com.greathack.homlin.controller.docDistribute; import org.apache.commons.fileupload.FileItemIterator; import org.apache.commons.fileupload.FileItemStream; import org.apache.commons.fileupload.FileUploadBase; import org.apache.commons.fileupload.FileUploadException; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; import org.apache.commons.fileupload.util.Streams; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import sun.misc.BASE64Decoder; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.*; import java.text.SimpleDateFormat; import java.util.*; @Controller @RequestMapping(value = "/back") public class UploadController { // 输出文件地址 private String url = ""; // 上传文件名 private String fileName = ""; // 状态 private String state = ""; // 文件类型 private String type = ""; // 原始文件名 private String originalName = ""; // 文件大小 private long size = 0; private HttpServletRequest request = null; private String title = ""; // 保存路径 private String savePath = "upload"; // 文件允许格式 private String[] allowFiles = {".rar", ".doc", ".docx", ".zip", ".pdf", ".txt", ".swf", ".wmv", ".gif", ".png", ".jpg", ".jpeg", ".bmp"}; // 文件大小限制,单位KB private int maxSize = 10000; private HashMap<String, String> errorInfo = new HashMap<String, String>(); public UploadController() { } public UploadController(HttpServletRequest request) { this.request = request; HashMap<String, String> tmp = this.errorInfo; tmp.put("SUCCESS", "SUCCESS"); //默认成功 tmp.put("NOFILE", "未包含文件上传域"); tmp.put("TYPE", "不允许的文件格式"); tmp.put("SIZE", "文件大小超出限制"); tmp.put("ENTYPE", "请求类型ENTYPE错误"); tmp.put("REQUEST", "上传请求异常"); tmp.put("IO", "IO异常"); tmp.put("DIR", "目录创建失败"); tmp.put("UNKNOWN", "未知错误"); } @ResponseBody @RequestMapping(value = "/upload") public void upload1(HttpServletRequest request, HttpServletResponse response) throws Exception { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); UploadController up = new UploadController(request); up.setSavePath("/upload"); String[] fileType = {".gif", ".png", ".jpg", ".jpeg", ".bmp"}; up.setAllowFiles(fileType); up.setMaxSize(10000); //单位KB up.upload(); String callback = request.getParameter("callback"); String result = "{\"name\":\"" + up.getFileName() + "\", \"originalName\": \"" + up.getOriginalName() + "\", \"size\": " + up.getSize() + ", \"state\": \"" + up.getState() + "\", \"type\": \"" + up.getType() + "\", \"url\": \"" + up.getUrl() + "\"}"; result = result.replaceAll("\\\\", "\\\\"); if (callback == null) { response.getWriter().print(result); } else { response.getWriter().print("<script>" + callback + "(" + result + ")</script>"); } } public void upload() throws Exception { boolean isMultipart = ServletFileUpload.isMultipartContent(this.request); if (!isMultipart) { this.state = this.errorInfo.get("NOFILE"); return; } DiskFileItemFactory dff = new DiskFileItemFactory(); String savePath = this.getFolder(request.getSession().getServletContext().getRealPath(this.savePath)); dff.setRepository(new File(savePath)); try { ServletFileUpload sfu = new ServletFileUpload(dff); sfu.setSizeMax(this.maxSize * 1024); sfu.setHeaderEncoding("utf-8"); FileItemIterator fii = sfu.getItemIterator(this.request); while (fii.hasNext()) { FileItemStream fis = fii.next(); if (!fis.isFormField()) { this.originalName = fis.getName().substring(fis.getName().lastIndexOf(System.getProperty("file.separator")) + 1); if (!this.checkFileType(this.originalName)) { this.state = this.errorInfo.get("TYPE"); continue; } this.fileName = this.getName(this.originalName); this.type = this.getFileExt(this.fileName); this.url = savePath + "/" + this.fileName; //mkdirs(request.getSession().getServletContext().getRealPath(savePath)); BufferedInputStream in = new BufferedInputStream(fis.openStream()); File file = new File((this.url)); FileOutputStream out = new FileOutputStream(file); BufferedOutputStream output = new BufferedOutputStream(out); Streams.copy(in, output, true); this.url = this.savePath + "/" + new SimpleDateFormat("yyyyMMdd").format(new Date()) + "/" + this.fileName; this.state = this.errorInfo.get("SUCCESS"); this.size = file.length(); //UE中只会处理单张上传,完成后即退出 break; } else { String fname = fis.getFieldName(); //只处理title,其余表单请自行处理 if (!fname.equals("pictitle")) { continue; } BufferedInputStream in = new BufferedInputStream(fis.openStream()); BufferedReader reader = new BufferedReader(new InputStreamReader(in)); StringBuffer result = new StringBuffer(); while (reader.ready()) { result.append((char) reader.read()); } this.title = new String(result.toString().getBytes(), "utf-8"); reader.close(); } } } catch (FileUploadBase.SizeLimitExceededException e) { this.state = this.errorInfo.get("SIZE"); } catch (FileUploadBase.InvalidContentTypeException e) { this.state = this.errorInfo.get("ENTYPE"); } catch (FileUploadException e) { this.state = this.errorInfo.get("REQUEST"); } catch (Exception e) { this.state = this.errorInfo.get("UNKNOWN"); } } /** * 接受并保存以base64格式上传的文件 * * @param fieldName */ public void uploadBase64(String fieldName) { String savePath = this.getFolder(this.savePath); String base64Data = this.request.getParameter(fieldName); this.fileName = this.getName("test.png"); this.url = savePath + "/" + this.fileName; BASE64Decoder decoder = new BASE64Decoder(); try { File outFile = new File(this.getPhysicalPath(this.url)); OutputStream ro = new FileOutputStream(outFile); byte[] b = decoder.decodeBuffer(base64Data); for (int i = 0; i < b.length; ++i) { if (b[i] < 0) { b[i] += 256; } } ro.write(b); ro.flush(); ro.close(); this.state = this.errorInfo.get("SUCCESS"); } catch (Exception e) { this.state = this.errorInfo.get("IO"); } } /** * 文件类型判断 * * @param fileName * @return */ private boolean checkFileType(String fileName) { Iterator<String> type = Arrays.asList(this.allowFiles).iterator(); while (type.hasNext()) { String ext = type.next(); if (fileName.toLowerCase().endsWith(ext)) { return true; } } return false; } /** * 获取文件扩展名 * * @return string */ private String getFileExt(String fileName) { return fileName.substring(fileName.lastIndexOf(".")); } /** * 依据原始文件名生成新文件名 * * @return */ private String getName(String fileName) { Random random = new Random(); return this.fileName = "" + random.nextInt(10000) + System.currentTimeMillis() + this.getFileExt(fileName); } /** * 根据字符串创建本地目录 并按照日期建立子目录返回 * * @param path * @return */ private String getFolder(String path) { SimpleDateFormat formater = new SimpleDateFormat("yyyyMMdd"); path += "/" + formater.format(new Date()); File dir = new File((path)); if (!dir.exists()) { try { dir.mkdirs(); } catch (Exception e) { this.state = this.errorInfo.get("DIR"); return ""; } } return path; } /** * 根据传入的虚拟路径获取物理路径 * * @param path * @return */ private String getPhysicalPath(String path) { String servletPath = this.request.getServletPath(); String realPath = this.request.getSession().getServletContext() .getRealPath(servletPath); return new File(realPath).getParent() + "/" + path; } public void setSavePath(String savePath) { this.savePath = savePath; } public void setAllowFiles(String[] allowFiles) { this.allowFiles = allowFiles; } public void setMaxSize(int size) { this.maxSize = size; } public long getSize() { return this.size; } public String getUrl() { return this.url; } public String getFileName() { return this.fileName; } public String getState() { return this.state; } public String getTitle() { return this.title; } public String getType() { return this.type; } public String getOriginalName() { return this.originalName; } }
需要注意的是:
Spring-mvc.xml需要对请求的路径进行放行(三个拦截器都要放行)
<mvc:interceptors> <mvc:interceptor> <mvc:mapping path="/**"/> <mvc:exclude-mapping path="/error/**"/> <mvc:exclude-mapping path="/resources/**"/> <mvc:exclude-mapping path="/static/**"/> <mvc:exclude-mapping path="/upload/**"/> <mvc:exclude-mapping path="/outputfile/**"/> <mvc:exclude-mapping path="/token/getToken"/> <mvc:exclude-mapping path="/user/login"/> <mvc:exclude-mapping path="/**/delete"/> <mvc:exclude-mapping path="/**/get**"/> <mvc:exclude-mapping path="/back/upload"/> <bean class="com.greathack.homlin.interceptor.TokenCheckInterceptor"></bean> </mvc:interceptor> <mvc:interceptor> <mvc:mapping path="/**"/> <mvc:exclude-mapping path="/error/**"/> <mvc:exclude-mapping path="/resources/**"/> <mvc:exclude-mapping path="/static/**"/> <mvc:exclude-mapping path="/upload/**"/> <mvc:exclude-mapping path="/outputfile/**"/> <mvc:exclude-mapping path="/token/getToken"/> <mvc:exclude-mapping path="/user/login"/> <mvc:exclude-mapping path="/back/upload"/> <bean class="com.greathack.homlin.interceptor.LoginCodeCheckInterceptor"></bean> </mvc:interceptor> <mvc:interceptor> <mvc:mapping path="/**"/> <mvc:exclude-mapping path="/error/**"/> <mvc:exclude-mapping path="/resources/**"/> <mvc:exclude-mapping path="/static/**"/> <mvc:exclude-mapping path="/upload/**"/> <mvc:exclude-mapping path="/outputfile/**"/> <mvc:exclude-mapping path="/token/getToken"/> <mvc:exclude-mapping path="/user/login"/> <mvc:exclude-mapping path="/user/logout"/> <mvc:exclude-mapping path="/user/getLoginInfo"/> <mvc:exclude-mapping path="/dict/getAllDict"/> <mvc:exclude-mapping path="/dict/getAllDictList"/> <mvc:exclude-mapping path="/amUnit/getAmUnitObject"/> <mvc:exclude-mapping path="/powerItem/search"/> <mvc:exclude-mapping path="/amZlProcess/**"/> <mvc:exclude-mapping path="/process/**"/> <mvc:exclude-mapping path="/*/get*Roster"/> <mvc:exclude-mapping path="/amGwgzbz/findByGwjb"/> <mvc:exclude-mapping path="/amXjgzbz/findByXj"/> <mvc:exclude-mapping path="/amArchiveAdvSearch/**"/><!--人员高级搜索--> <mvc:exclude-mapping path="/user/updateSelf"/><!--修改个人资料--> <mvc:exclude-mapping path="/user/mdfyOwnPwd"/><!--修改自己的密码--> <mvc:exclude-mapping path="/console/hometowns"/><!--首页--> <mvc:exclude-mapping path="/innerMessage/**"/><!--站内信--> <mvc:exclude-mapping path="/receive/**"/><!--站内信--> <mvc:exclude-mapping path="/amHmd/isIdcardInHmd"/><!--判断是否在黑名单--> <mvc:exclude-mapping path="/amJbxx/isExist"/><!--判断是否存在系统中--> <mvc:exclude-mapping path="/amZlxpc/isHandleComplete"/><!--判断招录小批次当前进度的人员是否全部处理了--> <mvc:exclude-mapping path="/back/upload"/><!--富文本编辑器图片上传--> <bean class="com.greathack.homlin.interceptor.PermissionInterceptor"></bean> </mvc:interceptor> </mvc:interceptors>