天天看点

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")[].files;
                   /**这里多次append file到同一个key里面*/
                   for(var i=;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();
            resultPO.setD(urls);
            return resultPO;
        } catch (Exception e) {
            resultPO.setR();
            resultPO.setErrAndMsg(EXCEPTION_FOND);
            return resultPO;
        }
    }
           

继续阅读