如何使用jQuery,ajax,spring boot在表单数据中上传多个文件

时间:2017-06-13 06:46:55

标签: jquery ajax multipartform-data

我正在尝试在formData中上传两个zip文件。

代码看起来像......

我的表单

<form id="fileForm">
  <input type="file" name="file" id="fileOne" />
  <input type="file" name="file" id="fileTwo" />
  <button id="btnUpload" type="button">Upload file</button>
</form>

jQuery + ajax

$(document).ready(function() {
  var imgContainer = $('#imgContainer');
  $('#btnUpload').click(function() {
    var formData = new FormData();
    $.each($("input[type=file]"), function(i, obj) {
      $.each(obj.files, function(j, file) {
        formData.append('file[' + j + ']', file);
        console.log(file);
      })
    });

    //Ajax call
    $.ajax({
      url: 'myUrl',
      type: "POST",
      data: formData,
      enctype: 'multipart/form-data',
      processData: false,
      contentType: false
    }).done(function(data) {
      imgContainer.html('');
      var img = '<img src="data:' + data.contenttype + ';base64,' +
        data.base64 + '"/>';

      imgContainer.append(img);
    }).fail(function(jqXHR, textStatus) {
      //alert(jqXHR.responseText);
      console.log('File upload failed ...');
    });
  });
});

我的问题是,当我收到控制器中的文件时,我只得到一个文件。

这就是我在fileMap中获得的内容,enter image description here 一个数组在另一个数组上的值为null。

我的控制器

@RequestMapping(value = "/uploadFile", method = RequestMethod.POST, produces = {
  "application/json"
})
@ResponseBody
public String uploadFile(MultipartHttpServletRequest request,
  HttpServletResponse response) throws Exception {
  Map < String, MultipartFile > filesMap = new HashMap < String, MultipartFile > ();
  filesMap = request.getFileMap();
  System.out.println("filesMap :" + filesMap);
  return = "hello";
}

任何人都可以帮我调试代码。我在哪里做错了。

0 个答案:

没有答案