1. 程式人生 > >HTML5 FormData多檔案上傳

HTML5 FormData多檔案上傳

今天在處理檔案上傳的時候遇到一個問題,就是想使用者選擇多個檔案一次上傳,並且用jquery post方式提交,
最開始以為直接給Formdata append一個file的資料就行了,但是到了後臺資料就沒有了,後面經過實驗發現
可以向formdata的key值裡面多次append file 就可以,附上程式碼。

html元素:

<input  type="file" name="uploadImgs" id="file" multiple="multiple"/>

JavaScript:

    function fileUpload(){
                   var
data = new FormData(); var files= $("#file")[0].files; /**這裡多次append file到同一個key裡面*/ for(var i=0;i<files.length;i++){ data.append("picture", files[i]); } $.ajax({ data: data, url: '/uploadImg'
, type: "POST", dataType: "json", cache: false, contentType: false, processData: false, success: function (resp) { console.log(resp); } }) }
  後臺程式碼,後臺使用Springboot寫的,貼出部分controller的程式碼:
    @PostMapping("/uploadImg")
    public ResponsePO pictureUpload(@RequestParam("picture") List<MultipartFile> files)     {
        ResponsePO resultPO = new ResponsePO();
        List<String> urls = new ArrayList<>();
        try {
            for (MultipartFile file : files) {
                String fileName = storageService.store(file);
                urls.add("/uploadimg/" + fileName);
            }
            resultPO.setR(1);
            resultPO.setD(urls);
            return resultPO;
        } catch (Exception e) {
            resultPO.setR(0);
            resultPO.setErrAndMsg(EXCEPTION_FOND);
            return resultPO;
        }
    }