UMeditor上传图片配置

UMeditor是UEditor的简洁版，保留了UEditor中常用的功能，在代码量和加载速度上均有很大的提升。

本文上传图片的执行后台基于jfinal框架。

1、html加载调用的样式和脚本，为保证图片能上传到服务器，此处需要做几点配置：

　　1）window.UMEDITOR_HOME_URL是相对于网站根目录的相对路径，为了避免上传过程中的路径问题，此处最好做配置

　　2）imageUrl 图片上传到后台时，对应的处理方法。

　　3）imagePath图片的网络路径，图片保存时只保存了图片名称，显示时需要做网络映射，下面的tomcat server.xml中会有相关配置。

 <link href="themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="third-party/jquery.min.js"></script>
    <script type="text/javascript" src="third-party/template.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="umeditor.min.js"></script>
    <script type="text/javascript" src="lang/zh-cn/zh-cn.js"></script>

<!--style给定宽度可以影响编辑器的最终宽度-->
<script type="text/plain" id="myEditor" style="1000px;height:240px;">
    <p>这里我可以写一些输入提示</p>
</script>
<script>
window.UMEDITOR_HOME_URL = "${base}/back/umeditor/";/** "相对于网站根目录的相对路径"**/
var um = UM.getEditor('myEditor', {
    imageUrl:'${base}/back/uploadImages',/**图片上传执行action**/
    imagePath:'/upload/',/**图片网络显示路径**/
    focus: true
});

</script>

2、后台处理程序

/**上传图片**/
    public void uploadImages(){
        List<Map<String,Object>> upload=uploadFiles(getRequest(), PropKit.get("upload_path"), 10, "", "gif,jpg,jpeg,png,bmp");
        renderJson(JsonKit.toJson(upload.get(0)));
    }
　　private static FileRenamePolicy fileRenamePolicy = new DefaultFileRenamePolicy();
    /**
     * 
     * @param request 文件上传请求
     * @param uploadPath 文件上传路径
     * @param maxPostSize 文件传输最大大小（MB）
     * @param encoding 字符编码集设置（默认utf-8）
     * @param filetype 上传文件格式（扩展名与扩展名间用","隔开，扩展名前没有"."）
     * @return 上传的文件名及文件路径
     */
    public static List<Map<String,Object>> uploadFiles(HttpServletRequest request,String uploadPath,int maxPostSize,String encoding,String filetype){
        
        encoding=encoding==null||"".equals(encoding)?"utf-8":encoding;
        
        File dir = new File(uploadPath);
        if ( !dir.exists()) {
            if (!dir.mkdirs()) {
                throw new IllegalArgumentException("文件路径无法创建");
            }
        }
        
        List<Map<String,Object>> uploadFileDatas=new ArrayList<Map<String,Object>>();
        
        try {
            MultipartRequest multipartRequest = new  MultipartRequest(request, uploadPath, maxPostSize*1024*1024, encoding, fileRenamePolicy);
            Enumeration<?> files = multipartRequest.getFileNames();
32             while (files.hasMoreElements()) {
33                 String name = (String)files.nextElement();
34                 String filesystemName = multipartRequest.getFilesystemName(name);
35                 // 校验文件格式
36                 if (filesystemName != null) {
37                     Map<String, Object> ulfd=new HashMap<String,Object>();
38                     if(checkFileType(filesystemName.substring(filesystemName.lastIndexOf(".")+1),filetype)){
39                         ulfd.put("parameterName", name);
40                         ulfd.put("uploadPath", uploadPath+System.getProperty("file.separator")+filesystemName);//图片的物理路径
41                         ulfd.put("url", filesystemName);
42                         ulfd.put("originalFileName", multipartRequest.getOriginalFileName(name));
43                         ulfd.put("contentType", multipartRequest.getContentType(name));
44                         ulfd.put("state", "SUCCESS");
45                     }else{
46                         new File(uploadPath+"/"+filesystemName).delete();
47                         ulfd.put("state", "文件格式非法");
48                     }
49                     uploadFileDatas.add(ulfd);
50                 }
51             }
52         } catch (Exception e) {
53             throw new RuntimeException(e);
54         }
55         return uploadFileDatas;
56     }
57     
58     private static boolean checkFileType(String extension,String filetype){
59         filetype=(filetype==null?"":filetype);
60         String[] types=filetype.split(",");
61         for(int i=0;i<types.length;i++){
62             if(!extension.trim().toLowerCase().equals(types[i].trim().toLowerCase())){
63                 break;
64             }else if(i==types.length-1){
65                 return false;
66             }
67         }
68         return true;
69     }

tomcat server配置

  <Context docBase="D:/webapps/upload/ssmt" path="/upload" reloadable="true" />

项目配置文件

upload_path=D:/webapps/upload/ssmt

js脚本中也要做更改

此图中红色框框是原来的代码，做测试时发现得到的返回值外面多了一层<pre></pre>，不知道哪里加上的，改成下方一行代码后就能获取到正确的json字符串了。

执行效果：