基於SpringMVC的上傳圖片

系統開發的時候有時候須要上傳文件，如圖片，使用Ajax上傳跟平時的寫法稍微不同，這裏舉例一下。

前端展現

<form class="am-form" id="userdata">
    <div class="am-form-group">
        <input type="text" name="username" placeholder="請輸入姓名">
    </div>

    <div class="am-form-group am-form-file">
        <div>
            <button type="button" class="am-btn am-btn-default am-btn-sm">
            <i class="am-icon-cloud-upload"></i> 選擇要上傳的圖片</button>
        </div>
        <input type="file"  name="inputfile">
    </div>

    <p>
        <button type="submit" class="am-btn am-btn-primary" id="save">提交</button>
    </p>
</form>
複製代碼

Ajax上傳

<script type="text/javascript">
    $("#save").click(function() {
        var form = new FormData($("#userdata")[0]);
        $.ajax({
            type : 'post',
            url : ...,//選擇上傳地址
            dataType : 'json',
            data : form,
            async : false,
            contentType : false, //必須
            processData : false, //必須
            error : function(result) {
        	    alert(result);
            },
            success : function(result) {
    	        if (result.code == 1) {
    	
    	        } else {
    		        alert("添加失敗");
    	    }
        }
    });
</script>
複製代碼

FormData是HTML5的一個功能，它使得文件上傳十分容易，固然可繼續添加其餘參數：

formData.append("鍵", 值);
複製代碼

SpringMVC的XML配置

<!-- 文件上傳解析器 -->
<bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- 設置上傳文件的最大尺寸爲5MB -->
    <property name="maxUploadSize">
	    <value>5242880</value>
    </property>
</bean>
複製代碼

後端上傳

@RequestMapping(value="/add",method=RequestMethod.POST)
@ResponseBody
public Msg addUser(@RequestParam("inputfile") MultipartFile inputfile,User user){
    if(!inputfile.isEmpty()){
        //一、獲取圖片完整名稱
        String fileStr=inputfile.getOriginalFilename();
        //二、使用隨機生成的字符串+源圖片擴展名組成的新的圖片名稱，防止圖片重名
        String newFilename=UUID.randomUUID().toString()
                        +fileStr.substring(fileStr.lastIndexOf("."));
        //三、將圖片保存到硬盤
        try {
            inputfile.transferTo(new File(path+newFilename));
        } catch (IllegalStateException | IOException e) {
            e.printStackTrace();
        }
        //四、將圖片新的名稱保存到數據庫
        user.setPicture(newFilename);
    }
    userService.addUser(user);
    return Msg.quickSuccess();
}
複製代碼

MultipartFile

SpringMVC可以使用MultipartFile上傳文件，它還有其餘的方法，可供參考

    String getContentType()//獲取文件MIME類型
    InputStream getInputStream()//後去文件流
    String getName() //獲取表單中文件組件的名字
    String getOriginalFilename() //獲取上傳文件的原名
    long getSize()  //獲取文件的字節大小，單位byte
    boolean isEmpty() //是否爲空
    void transferTo(File dest) //保存到一個目標文件中。
複製代碼

整個上傳流程其實很簡單，只要瞭解FormData和MultipartFile就能夠簡單的編寫上傳功能。