SpringMVC送出資料的同時上傳檔案

1. 要點

1. html頁面中的表單必須是enctype=”multipart/form-data”
2. 使用jquery-form的ajaxSubmit進行表單送出
3. 使用SpringMVC進行處理，需要配置multipartResolver
4. SpringMVC控制器中判斷request是否包含檔案，有檔案則處理檔案，沒有檔案則按原業務邏輯進行處理

2. 步驟

2.1 html頁面

需要設定表單的enctype=”multipart/form-data”。并使用jQuery-form的ajaxSubmit送出表單。

<form id="addForm" action="<c:url value='/doAdd'/>" method="POST" enctype="multipart/form-data">
    <input type="text" name="name" /> 
    <!-- 可以是任意個檔案域 -->
    <input type="file" name="file1"/>
    <input type="file" name="file2"/>
    <input type="file" name="file3"/>
    <input type="button" id="submitBtn" value="送出"/>
</form>
<!-- 引入依賴的Jquery和JQuery-Form -->
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.form/4.2.1/jquery.form.min.js" 
    integrity="sha384-tIwI8+qJdZBtYYCKwRkjxBGQVZS3gGozr3CtI+5JF/oL1JmPEHzCEnIKbDbLTCer" 
    crossorigin="anonymous"></script>
<!-- 自定義JavaScript -->
<script type="text/javascript">
    $("#submitBtn").on("click", function(){
        $("#addForm").ajaxSubmit({
            success : function(data){
                alert(data);
            },
            error : function(){
                alert("請求錯誤");
            }
        });
    });
</script>
           

2.2 SpringMVC配置

需要配置multipartResolver。

<!-- 檔案上傳解析器 -->
<bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" ref="maxUploadSize"></property>
</bean>

<!-- 上傳檔案 最大 50M -->
<bean id="maxUploadSize" class="java.lang.Long" >
    <constructor-arg index="0">
        <value>52428800</value>
    </constructor-arg>
</bean>
           

2.3 Controller

對于控制層，如果request是MultipartHttpServletRequest類型，則說明表單中有檔案，則可以對檔案進行處理。如果沒有上傳檔案，則對表單中的其它屬性進行處理。

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

@Controller
public class TestFileController {
    @RequestMapping("/doAdd")
    @ResponseBody
    public String doAdd(@RequestParam("name") String name, HttpServletRequest request){
        if (request instanceof MultipartHttpServletRequest) {
            MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;
            // 擷取上傳的檔案
            Map<String, MultipartFile> fileMap = multipartHttpServletRequest.getFileMap();
            for(Map.Entry<String, MultipartFile> entry : fileMap.entrySet()){
                // 對檔案進處理
                System.out.println(entry.getKey() + ":" + entry.getValue().getOriginalFilename());
            }
        }
        // 對name進行處理
        System.out.println(name);
        return "ok";
    }
}