Simditor编辑器 SpringMVC上传图片

1.本案例使用Maven项目

<!-- servlet 组件 -->
    <dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>

        <dependency>    
           <groupId>javax.servlet</groupId>    
           <artifactId>jstl</artifactId>    
           <version>1.2</version>    
           <scope>runtime</scope>    
        </dependency>  

        <!-- springmvc 组件 -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>4.3.4.RELEASE</version>
        </dependency>

        <!-- commons fileupload 组件 -->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.3</version>
        </dependency>

        <!-- commons io 组件 -->
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.5</version>
        </dependency>
        <!-- jackson 组件 -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.8.5</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.8.5</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.8.5</version>
        </dependency>

        <!-- junit 组件 -->
        <dependency>
            <groupId>org.junit</groupId>
            <artifactId>com.springsource.org.junit</artifactId>
            <version>4.7.0</version>
        </dependency>
    </dependencies>
  <!-- 插件 -->
  <build>
    <finalName>${project.artifactId}</finalName>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-resources-plugin</artifactId>
            <version>3.0.1</version>
            <configuration>
                <encoding>UTF-8</encoding>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.5.1</version>
            <configuration>
                <target>1.8</target>
                <source>1.8</source>
                <encoding>UTF-8</encoding>
            </configuration>
        </plugin>
        //Tomcat插件(非必须)
        <plugin>
            <groupId>org.apache.tomcat.maven</groupId> 
            <artifactId>tomcat7-maven-plugin</artifactId>
            <version>2.2</version>
            <configuration>
                <path>/</path>
                <port>82</port>
            </configuration>
        </plugin>
    </plugins>
  </build>

2.客户端JSP

页面导入相关Simditor插件

<textarea id="tex"></textarea>
    <script type="text/javascript">
         var toolbar = [ 'title', 'bold', 'italic', 'underline', 'strikethrough',    
        'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|',    
        'link', 'image', 'hr', '|', 'indent', 'outdent' ];   
         var editor = new Simditor({
                textarea: $('#tex'),
                placeholder : "这里输入内容",
                pasteImage : true,
                toolbarFloat : true,    
                toolbar : toolbar,
                upload : {    
                    url : "/upload", //文件上传的接口地址    
                    //params: {}, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交    
                    fileKey: 'photo', //服务器端获取文件数据的参数名    
                    connectionCount: 1,    
                    leaveConfirm: '正在上传文件'    
                } 
          });
    </script>

3.服务端Java

省略SpringMVC配置

@Controller
public class FileUploads {

    @RequestMapping(value="test",method=RequestMethod.GET)
    public String test() {
        return "test";
    }

    @RequestMapping(value="upload",method=RequestMethod.POST)
    @ResponseBody
    public Map<String, String> upload(MultipartFile photo) throws IllegalStateException, IOException {
        Map<String, String> map = new HashMap<String, String>();
        try {
            //存储文件夹
            String holder = "fileUpload/";
            if (photo == null) {
                return null;
            }
            String orgginalFileName = photo.getOriginalFilename();
            //新文件名称
            String newFileName = UUID.randomUUID().toString() + orgginalFileName;
            //保存路径
            String serverPath = getRealPath() + holder;

            photo.transferTo(new File(serverPath, newFileName));

            //返回客户端的JSON
            map.put("success", "true");
            map.put("msg", "成功");
            //返回服务器地址
            map.put("file_path",getServerPath() + holder + newFileName);
        } catch (IOException e) {
            map.put("success", "false");
        }
        return map;
    }

    /**
     * 服务器地址
     * @return
     */
    public String getServerPath() {
        HttpServletRequest request = getRequest();
        return request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/" + request.getContextPath() + "/";

    }
    /**
     * 获取项目根目录
     * @return
     */
    public String getRealPath() {
        HttpServletRequest request = getRequest();
        return request.getServletContext().getRealPath("/");
    }
    /**
     * 
     * @return
     */
    private HttpServletRequest getRequest() {
        return ((ServletRequestAttributes)(RequestContextHolder.currentRequestAttributes())).getRequest();
    }
}

项目目录结构

演示：
上传图片选择

确定上传

上传成功