ファイルをDrag&Dropしてアップロードをする要件があったので投稿します。
1.HTML
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Tutorial: Upload</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
#dragdroparea {
border:2px dotted #0B85A1;
width:500px;
height: 100px;
color:#92AAB0;
text-align:left;vertical-align:middle;
padding:10px 10px 10 10px;
margin-bottom:10px;
font-size:200%;
}
</style>
</head>
<body>
<h1>ドラッグ＆ドロップでファイルアップロード</h1>
<div id="dragdroparea">ここにドロップしてください。</div>
<br/><br/>
<div id="status1"></div>
<script>
$(function() {
function sendFileToServer(formData,status){
var uploadURL ="/upload"; //Upload URL
$.ajax({
url: uploadURL,
type: "POST",
contentType:false,
processData: false,
cache: false,
data: formData,
timeout: 30000,
beforeSend: function(xhr, settings) {
//送信前の処理
},
complete: function(xhr, textStatus) {
//通信完了
},
success: function(result, textStatus, xhr) {
//ajax通信が成功した
$("#status1").append("File upload Done<br>");
},
error: function(xhr, textStatus, error) {
//ajax通信が失敗した
$('#status1').append('送信に失敗しました<br>');
}
});
}
function handleFileUpload(files,obj){
var fd = new FormData();
for (var i = 0; i < files.length; i++){
fd.append('files', files[i]);
}
sendFileToServer(fd,status);
}
$(document).ready(function(){
var obj = $("#dragdroparea");
obj.on('dragenter', function (e) {
e.stopPropagation();
e.preventDefault();
});
obj.on('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
});
obj.on('drop', function (e) {
e.preventDefault();
var files = e.originalEvent.dataTransfer.files;
handleFileUpload(files);
});
$(document).on('dragenter', function (e){
e.stopPropagation();
e.preventDefault();
});
$(document).on('dragover', function (e){
e.stopPropagation();
e.preventDefault();
});
$(document).on('drop', function (e){
e.stopPropagation();
e.preventDefault();
});
});
});
</script>
</body>
</html>
handleFileUploadで、formの変数"files"にファイルをセットします。
2.Controller(サーバ側)
UploadController.java
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
@Controller
public class HeloController {
@RequestMapping(value = "/", method = RequestMethod.GET)
public String index(Model model) {
return "index";
}
@RequestMapping(value = "/upload", method = RequestMethod.POST)
public String index(@RequestParam("files") List<MultipartFile> files, Model model) {
for (MultipartFile file : files) {
System.out.println("getOriginalFilename="+file.getOriginalFilename());
}
return "index";
}
}
サーバは
@RequestParam("files") List<MultipartFile> files
とすることで、MultipartFileがセットされます。
3.確認
コンソールのログにアップロードしたファイルが表示されました。
getOriginalFilename=CSVファイル.csv
getOriginalFilename=CSVファイル (1).csv
getOriginalFilename=CSVファイル (2).csv
2018-09-14 00:30:22.556 DEBUG 8148・・・・