28845


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

■HTML＋thymeleaf

[code]

    <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>
    
[/code]

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

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


CC BY-SA 3.0
2016-09-11T04:33:36.620
28818
2016-09-12T21:43:43.993
12842
question
javascript spring-boot
springBootでファイルをアップロードしたい


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

[code]

    <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>
    
[/code]

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

[code]

    @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;
      }
    }
    
[/code]


CC BY-SA 3.0
2016-09-12T21:43:43.993
28845
2016-09-12T21:43:43.993
2214
28818
answer