0

springBootでファイルをアップロードしたいと考えています。

■HTML+thymeleaf

<div class="XXXX">
    <span id="filename" th:text="">&nbsp;</span>
</div>
<div class="YYYY">
    <input id="addFile" type="file" style="display: none" accept=".csv"/>
    <button type="button"
        onclick="$(this).prev().click();">ファイルを選ぶ</button>
</div>

このよう感じでファイルを選択した後
別のボタン押下によってajaxで、選択したファイルやその他の情報をControllerに通知したいです。
formで渡そうと思うのですが、この選択したファイルをどのようにして
MultipartFileとして渡していいのかがわかりません。

アドバイスいただけると助かります。

1 件の回答 1

1

ajax(jQuery)でのファイルアップロードはFormDataがポイントです。FormDataに送信したいファイルやその他のフォームデータを設定し、contentTypeをfalseにします。そうすることで自動的に適切なcontentType(multipart/form-data)になります。

<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
 <div class="XXXX">
  <span id="filename" th:text="">&nbsp;</span>
 </div>
 <div class="YYYY">
  <input id="addFile" type="file" style="display: none" accept=".csv" />
  <button type="button" onclick="$(this).prev().click();">ファイルを選ぶ</button>
 </div>
</body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
  $('#addFile').on('change', onChangeFile);

  function onChangeFile() {
    // ファイルの情報を取得
    var uploadFile = $('#addFile')[0].files[0];
    $('.XXXX').text(uploadFile.name);

    // ファイルアップロード
    var formData = new FormData();
    formData.append("file", uploadFile);
    formData.append("otherData", "hoge");

    $.ajax({
      type: 'post',
      url: '/upload',
      processData: false,
      contentType: false, // 送信するデータをFormDataにする場合、こうしないといけない。
      cache: false,
      dataType: 'text',
      data: formData
    }).done(function(data) {
      console.log(data);
    }).fail(function(xhr, textStatus, thrown) {
      console.log(textStatus, thrown);
    });
  }
</script>
</html>

受け取るSpringのコントローラは例えば次のように実装します。

@Controller
@EnableAutoConfiguration
public class SampleController {
  public static void main(String[] args) throws Exception {
    SpringApplication.run(SampleController.class, args);
  }

  @RequestMapping(value = "/upload", method = RequestMethod.POST)
  @ResponseBody
  public String upload(@RequestParam MultipartFile file, String otherData) throws IOException {
    Path path = Paths.get(System.getProperty("java.io.tmpdir"), file.getOriginalFilename());
    file.transferTo(path.toFile());
    return "uploaded, otherData = " + otherData;
  }
}
1
  • コメントありがとうございます。回答が遅くなり申し訳ございません。 FormData!早速試してみたいと思います!
    – kanko
    2016年9月28日 10:29

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。