SpringMVC框架五：圖片上傳與JSON交互

在正式圖片上傳之前，先處理一個細節問題：

每一次發布項目，Tomcat都會重新解壓war包，之前上傳過的圖片會丟失

為了解決這個問題：可以不在Tomcat下保存圖片，而是另找一個目錄。

 

上傳圖片：

<form method="post" enctype="multipart/form-data">
   <input type="file" name="pictureFile">
</form>

 

 

在上傳圖片之前，需要在springMVC.xml中配置：

    <!-- 上傳圖片配置實現類 -->
    <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 上傳圖片的大小（單位：字節）-->
        <property name="maxUploadSize" value="5000000" />
    </bean>

注意：這個id不能改成其他的，否則無效

除了上傳文件大小以外，還有其他幾個參數，這里就不一一展示了

 

保存圖片到F:/upload：

    @RequestMapping(value = "/upload")
    public ModelAndView upload(MultipartFile pictureFile) {
        // 保存圖片

        // 防止重復，給圖片id設為UUID
        String id = UUID.randomUUID().toString().replace("-", "");

        String exName = FilenameUtils.getExtension(pictureFile.getOriginalFilename());
        
        String name = id+"."+exName;
        
        try {
            pictureFile.transferTo(new File("F:\\upload\\" + name));
        } catch (Exception e) {
            e.printStackTrace();
        }
        
        //保存ID到數據庫
        //userService.savePicture(id);

        ModelAndView mav = new ModelAndView();
        mav.setViewName("success");
        return mav;
    }

 

為了方便獲得文件擴展名，這里用了其他的包，如果自己寫稍顯麻煩：

 

 

 

JSON交互：

首先要導入JSON需要的包：

 

前端AJAX：

<script type="text/javascript">
$(function(){
    var params = '{"id": 1,"name": "測試商品","price": 99.9,"detail": "測試商品描述","pic": "123456.jpg"}';
    $.ajax({
        url : "${pageContext.request.contextPath }/json.action",
        data : params,
        contentType : "application/json;charset=UTF-8",
        type : "post",
        dataType : "json",
        success : function(data){
            alert(data.name);
        }
    });
});
</script>

 

 

Controller：

    //json交互
    @RequestMapping(value = "/json.action")
    public @ResponseBody 
    Items json(@RequestBody Items items) {
        //RequestBody注解，可以將json字符串解析到Items對象中
        //注意：Items的屬性名必須和json的Key一致
        System.out.println(items);

        Items responseItem = new Items();
        items.setName("success");
        //ReponseBody注解：自動將對象封裝成JSON字符串返回
        
        return responseItem;
    }