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