1. 程式人生 > >SpringMVC框架五:圖片上傳與JSON交互

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

view 方便 for 發布項目 repo 必須 class ebo http

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

每一次發布項目,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;
    }

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