SpringMVC上传图片并预览

1.HTML代码

<form id="logoform" enctype="multipart/form-data">
 <img src="../media/images/upload.png" style="width:150px;height:150px;" id="showimg"/>
 <input type="file" name="file" id="image_input"/>
</form>

2.JS代码

需要引入jquery.form.js插件，使用ajaxSubmit

<script src="${pageContext.request.contextPath}/media/jquery/jquery-1.10.2.min.js"></script>
<script src="${pageContext.request.contextPath}/media/jquery/jquery.form.js"></script>

$(function(){
    $("#image_input").change(function(){
        var imagePath = $("#image_input").val();
        if (imagePath == '') {
            return false;
        }
        var strExtension = imagePath.substr(imagePath.lastIndexOf('.') + 1);
        if (strExtension != 'jpg' && strExtension != 'gif' && strExtension != 'png' && strExtension != 'bmp') {
            alert("请选择图片");
            return false;
        }
        $("#logoform").ajaxSubmit({
            type : 'POST',
            url : 'uploadimage',
            success : function(data) {
                $("#showimg").attr("src", data);
            },
            error : function() {
                alert("上传失败，请检查网络后重试");
            }
        });
    })
})

3.后台代码

    /**
     * 上传图片
     * 
     * required = false 时，可以不传这个参数，true（默认）时必须传
     */
    @RequestMapping(value = "/uploadimage", produces = "text/html;charset=UTF-8")
    @ResponseBody
    public String uploadImage(HttpServletRequest request, 
        HttpServletResponse response, HttpSession session, 
        @RequestParam(value = "file", required = true) MultipartFile file) 
        throws IllegalStateException, IOException {

        String path = session.getServletContext().getRealPath("/media/temporaryupload");

        // fileName唯一性
        int a = ThreadLocalRandom.current().nextInt(100000, 999999);
        String fileName = "" + a + System.currentTimeMillis() + file.getOriginalFilename();

        File targetFile = new File(path, fileName);

        if (!targetFile.exists()) {
            targetFile.mkdirs();
        }
        /**
         * MultipartFile接口中定义了如下很多有用的方法。
              使用getSize()方法获得文件长度，以此决定允许上传的文件大小。
              使用isEmpty()方法判断上传文件是否为空文件，以此决定是否拒绝空文件。
              使用getInputStream()方法将文件读取为java.io.InputStream流对象。
              使用getContentType()方法获得文件类型，以此决定允许上传的文件类型。
              使用transferTo（dest）方法将上传文件写到服务器上指定的文件
         */
        file.transferTo(targetFile);
        String fileUrl = request.getContextPath() + "/media/temporaryupload/" + fileName;
        return fileUrl;
    }

4.SpringMVC xml配置文件

<!-- 配置文件上传 MultipartResolver ,文件处理器-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="5000000"></property><!-- 5M -->
    <property name="defaultEncoding" value="utf-8"/>

</bean>

当配置了这个处理器后，spring会对用户请求进行拦截，判断是否为附件上传类型，既enctype=”multipart/form-data”，如果是，则会对请求流进行处理，将其转换为DefaultMultipartHttpServletRequest对象，该对象封装了附件内容