HTML5 FormData多文件上传

来源：互联网发布：php is a 编辑：程序博客网时间：2024/05/29 20:01

今天在处理文件上传的时候遇到一个问题，就是想用户选择多个文件一次上传，并且用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;        }    }

0 0