下载链接
wangEditor下载
1.页面代码
<script type="text/javascript" src="<%=basePath %>/js/jquery1.8.3.min.js"></script> <script type="text/javascript" src="<%=basePath %>/js/wangEditor/wangEditor.min.js"></script> <script type="text/javascript"> var E = window.wangEditor //var editor = new E('#editor') var editor = new E( document.getElementById('editor') ); //editor.customConfig.uploadImgShowBase64 = true; //将图片以base64编码上传 editor.customConfig.uploadImgServer = '<%=basePath%>/upload/upload.do'; editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024; editor.customConfig.uploadImgMaxLength = 1; editor.customConfig.uploadFileName = 'myFileName'; editor.customConfig.uploadImgHooks = { customInsert:function (insertImg, result, editor) { var url =result.data; insertImg(url); } } editor.create(); </script>
2.java接受数据(单张图片)
package com.meeting.meeting.controller; import java.io.File; import java.io.IOException; import java.util.Calendar; import java.util.HashMap; import java.util.Map; import javax.servlet.http.HttpServletRequest; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; @Controller @RequestMapping("upload") public class WangEditorController { @RequestMapping(value="upload",method=RequestMethod.POST) @ResponseBody public Map<String, String> uploadWangImg(@RequestParam("myFileName")MultipartFile mf,HttpServletRequest request){ Map<String, String> map = new HashMap<String, String>(); String realPath = request.getSession().getServletContext().getRealPath("upload"); Calendar c = Calendar.getInstance(); int year = c.get(Calendar.YEAR); int month = c.get(Calendar.MONTH)+1; int day = c.get(Calendar.DATE); realPath += "\\images\\" + year +"\\" + month + "\\" + day +"\\";//以日期创建文件夹,防止重复 File file = new File(realPath); if(!file.exists()){ file.mkdirs(); } String filename = mf.getOriginalFilename(); String[] names=filename.split("\\.");// String tempNum=(int)(Math.random()*100000)+""; String uploadFileName=tempNum +System.currentTimeMillis()+"."+names[names.length-1]; File targetFile = new File (realPath,uploadFileName);//目标文件 try { mf.transferTo(targetFile); } catch (IllegalStateException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } String path = request.getServletContext().getContextPath(); map.put("data",path+"/upload/"+uploadFileName);//这里应该是项目路径*/ return map;//将图片地址返回 } }
3.多张图片处理
package com.meeting.meeting.controller; import java.io.File; import java.io.IOException; import java.util.ArrayList; import java.util.Calendar; import java.util.HashMap; import java.util.Iterator; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletRequest; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.MultipartHttpServletRequest; import org.springframework.web.multipart.commons.CommonsMultipartResolver; @Controller @RequestMapping("upload") public class WangEditorController { @RequestMapping(value="upload",method=RequestMethod.POST) @ResponseBody public Map<String, Object> uploadWangImg(HttpServletRequest request){ Map<String, Object> map = new HashMap<String, Object>(); String realPath = request.getSession().getServletContext().getRealPath("upload"); Calendar c = Calendar.getInstance(); int year = c.get(Calendar.YEAR); int month = c.get(Calendar.MONTH)+1; int day = c.get(Calendar.DATE); String dPath = "\\images\\" + year +"\\" + month + "\\" + day +"\\"; realPath += dPath; File folder = new File(realPath); if(!folder.exists()){ folder.mkdirs(); } CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext()); if (multipartResolver.isMultipart(request)) { MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; Iterator<String> iter = multipartRequest.getFileNames(); List<String> list = new ArrayList<String>(); while (iter.hasNext()) { MultipartFile file = multipartRequest.getFile(iter.next().toString()); if (file != null) { String filename = file.getOriginalFilename(); String[] names=filename.split("\\.");// String tempNum=(int)(Math.random()*100000)+""; String uploadFileName=tempNum +System.currentTimeMillis()+"."+names[names.length-1]; File targetFile = new File (realPath,uploadFileName);//目标文件 try { file.transferTo(targetFile); } catch (IllegalStateException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } String path = request.getServletContext().getContextPath(); list.add(path + "/upload/" + dPath + uploadFileName); //map.put("data"+1,path+"/upload/"+realPath+uploadFileName);//这里应该是项目路径*/ } } map.put("list", list); } return map;//将图片地址返回 } }
4.多张图片上传,页面放url链接用循环处理
editor.customConfig.uploadImgHooks = { customInsert:function (insertImg, result, editor) { var list = result.list; list.forEach(function(value,index,array){ insertImg(value); }) } }