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配置

@Controllerpublic 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();    }}

项目目录结构

演示：
上传图片选择

确定上传

上传成功