用AJAX異步提交表單上傳多個文件（type=‘file‘）案例

因爲在框架中上傳文件時不適合直接用form提交，因爲這樣會刷新頁面。我們一般會用ajax進行異步上傳。此方法可上傳多種類型文件。

html代碼：

<form action="" method="post" enctype="multipart/form-data" id="form1">
    <div class="modal fade" id="trainInfoModal" tabindex="-1" role="dialog" aria-labelledby="orderInfoModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×
                    </button>
                    <h4 class="modal-title" id="orderInfoModalLabel1">
                        培訓產品上傳
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row" style="margin-top: 10px">
 
                        <div class="col-sm-5 " style="text-align:center;">
 
                            <label for="file"class="btn btn-default">上傳培訓產品</label>
 
                            <input id="file"type="file"style="display:none" class="form-control" name="file" multiple="multiple">
                            <!--注意點：要多選文件要用multiple="multiple"-->
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">關閉
                    </button>
                    <button type="button" class="btn btn-primary" οnclick="uploadTrainProduct()">
                        確定
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

 js:

function uploadTrainProduct(){
    var formData = new FormData($("#form1")[0]);  //重點：要用這種方法接收表單的參數
    $.ajax({
        url : "/it/orderManage/uploadTrainProduct",
        type : 'POST',
        data : formData,
        // 告訴jQuery不要去處理髮送的數據
        processData : false,                 
        // 告訴jQuery不要去設置Content-Type請求頭
        contentType : false,
        async : false,
        success : function(data) {
            if(data){
            }
        }
    });
}

controller：

application/json 這個跟提交的content/type 一直否則報 406 錯誤，並且@ResponseBody 對應返回類型爲String 或者 Object 簡單類型，否則也報406錯誤。

@RequestMapping(value = "/uploadTrainProduct", method = RequestMethod.POST, produces = "application/json;charset=utf-8")
    @ResponseBody
    public String uploadTrainProduct(
            @RequestParam(value = "file") MultipartFile[] files,  //這樣接收文件
            @RequestParam(value = "id") String id,            //接收其他參數
            @RequestParam(value = "content") String content,
            HttpServletRequest request
    ) {
        try {
            for (MultipartFile file : files) {    //循環保存文件
                uploadFile(file, request);
            }
            // 返回前臺
            return "success";
 
        } catch (Exception e) {
            e.printStackTrace();
            return "fail";
        }
 
    }
 
    public String uploadFile(MultipartFile file, HttpServletRequest request) throws IOException {
        String fileName = file.getOriginalFilename();
        String path="d:/images/m2";            //設置文件保存路徑
//        File tempFile = new File(path, new Date().getTime() + String.valueOf(fileName));
        File tempFile = new File(path, String.valueOf(fileName));
        if (!tempFile.getParentFile().exists()) {    //創建文件夾
            tempFile.getParentFile().mkdir();
        }
        if (!tempFile.exists()) {
            tempFile.createNewFile();
        }
        file.transferTo(tempFile);
        return "images/" + tempFile.getName();
    }

這個案例也可以演變爲一個表單上，一個選擇圖片，一個選擇視頻的需求。

public Boolean uploadTrainProduct(
            @RequestParam(value = "a_name") String name,                  //參數名稱
            @RequestParam(value = "textfield") String textfield,          //圖片文件名稱
            @RequestParam(value = "file") MultipartFile imageFile,        //圖片文件二進制
            @RequestParam(value = "videofield") String videofield,        //視頻文件名稱
            @RequestParam(value = "videofile") MultipartFile videoFile,   //視頻文件二進制
            HttpServletRequest request
    ) {
        return ture;
}

結束