wangEditor在线HTML编辑器，上传图片

56 阅读 0 评论 37 点赞

我是靠谱客的博主刻苦墨镜，最近开发中收集的这篇文章主要介绍wangEditor在线HTML编辑器，上传图片，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

下载链接

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);
})
}
}