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=""> </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;
}
}