HTML 5 FormDataマルチファイルアップロード

3214 ワード

                  ,               ,   jquery post    ,
        Formdata append  file      ,            ,        
   formdata key     append file    ,    。

html要素:
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"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 files)     {
        ResponsePO resultPO = new ResponsePO();
        List 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;
        }
    }