A-pZ/upload.html

## upload.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org" lang="ja">

<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"></meta>
<meta charset="utf-8"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta name="description" content=""></meta>
<meta name="author" content=""></meta>

<title>File Upload(HTML5)</title>
<link href="./css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
<link href="./css/bootstrap-theme.min.css" rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}"/>
<link href="./css/custom.css" rel="stylesheet" th:href="@{/css/custom.css}"/>
<script src="./js/jquery-1.11.1.min.js" th:src="@{/js/jquery-1.11.1.min.js}"></script>
<script src="./js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
/**
 * ドラッグ時の処理。
 */
var dragover = function(event) {
	event.preventDefault();
	$(event.target).addClass("alert-success");
}

/**
 * ドラッグから外れたときの処理。
 */
var dragleave = function(event) {
	event.preventDefault();
	$(event.target).removeClass("alert-success");
}

/**
 * ファイルドロップする段落のロック。
 */
var droplock = false;

/**
 * ドロップ時の処理。
 */
var drop = function(event) {

	event.preventDefault();

	if ( droplock ) {
		// もしロック中であれば中断する。
		alert('アップロード処理中です。');
		return false;
	}

	// ロック
	droplock = true;

	var files = event.dataTransfer.files;

	// HTML5 FormData
	var formData = new FormData();

	// HTML5 File-Reader
	var reader = new FileReader();
	reader.onerror = function(event) {
		alert("ファイル読み込み時にエラーが発生しました。");
	}
	for ( var i=0;i<files.length;i++ ) {
		var file = files[i];
		formData.append('picture' ,file , file.name);
		// file.size
		// file.name
		// file.lastModifiedDate
		// file.type
	}

	$.ajax({
		url  : [[@{upload}]] ,
		type : "POST" ,
		data : formData ,
		processData : false ,
		contentType : false ,
		success : function(result) {
			$('#message').text(result.message);
			droplock = false;
		}
	});
}
/*]]>*/
</script>
<style type="text/css">
div.upload {
	border-style: dotted;
	border-color: navy;
	border-width: 1px;
}
</style>
</head>

<body role="document">
	<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container" th:replace="templates/header :: header">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Bootstrap theme</a>
			</div>
			<div class="navbar-collapse collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#about">About</a></li>
					<li><a href="#contact">Contact</a></li>
					<li class="dropdown"><a href="#" class="dropdown-toggle"
						data-toggle="dropdown">Dropdown <span class="caret"></span></a>
						<ul class="dropdown-menu" role="menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li class="dropdown-header">Nav header</li>
							<li><a href="#">Separated link</a></li>
							<li><a href="#">One more separated link</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<!--/.nav-collapse -->
		</div>
	</div>

	<div class="container theme-showcase" role="main">

		<div class="alert alert-success">
			<h4 id="message" th:text="${action.actionMessages[0]}">File upload.</h4>
		</div>

		<form action="upload.html" name="uploadForm" id="uploadForm" th:attr="action=@{upload}" enctype="multipart/form-data" method="POST">
			<div class="alert upload" role="alert" ondragover="dragover(event)" ondragleave="dragleave(event)" ondrop="drop(event)">
				ファイルをここにドラッグ＆ドロップしてください。
			</div>
		</form>
	</div>
</body>

</html>
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org" lang="ja">

	<head>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"></meta>
	<meta charset="utf-8"></meta>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
	<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
	<meta name="description" content=""></meta>
	<meta name="author" content=""></meta>

	<title>File Upload(HTML5)</title>
	<link href="./css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
	<link href="./css/bootstrap-theme.min.css" rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}"/>
	<link href="./css/custom.css" rel="stylesheet" th:href="@{/css/custom.css}"/>
	<script src="./js/jquery-1.11.1.min.js" th:src="@{/js/jquery-1.11.1.min.js}"></script>
	<script src="./js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	<script type="text/javascript" th:inline="javascript">
	/<![CDATA[/
	/**
	* ドラッグ時の処理。
	*/
	var dragover = function(event) {
	event.preventDefault();
	$(event.target).addClass("alert-success");
	}

	/**
	* ドラッグから外れたときの処理。
	*/
	var dragleave = function(event) {
	event.preventDefault();
	$(event.target).removeClass("alert-success");
	}

	/**
	* ファイルドロップする段落のロック。
	*/
	var droplock = false;

	/**
	* ドロップ時の処理。
	*/
	var drop = function(event) {

	event.preventDefault();

	if ( droplock ) {
	// もしロック中であれば中断する。
	alert('アップロード処理中です。');
	return false;
	}

	// ロック
	droplock = true;

	var files = event.dataTransfer.files;

	// HTML5 FormData
	var formData = new FormData();

	// HTML5 File-Reader
	var reader = new FileReader();
	reader.onerror = function(event) {
	alert("ファイル読み込み時にエラーが発生しました。");
	}
	for ( var i=0;i<files.length;i++ ) {
	var file = files[i];
	formData.append('picture' ,file , file.name);
	// file.size
	// file.name
	// file.lastModifiedDate
	// file.type
	}

	$.ajax({
	url : [[@{upload}]] ,
	type : "POST" ,
	data : formData ,
	processData : false ,
	contentType : false ,
	success : function(result) {
	$('#message').text(result.message);
	droplock = false;
	}
	});
	}
	/]]>/
	</script>
	<style type="text/css">
	div.upload {
	border-style: dotted;
	border-color: navy;
	border-width: 1px;
	}
	</style>
	</head>

	<body role="document">
	<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
	<div class="container" th:replace="templates/header :: header">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed"
	data-toggle="collapse" data-target=".navbar-collapse">
	<span class="sr-only">Toggle navigation</span> <span
	class="icon-bar"></span> <span class="icon-bar"></span> <span
	class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="#">Bootstrap theme</a>
	</div>
	<div class="navbar-collapse collapse">
	<ul class="nav navbar-nav">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#about">About</a></li>
	<li><a href="#contact">Contact</a></li>
	<li class="dropdown"><a href="#" class="dropdown-toggle"
	data-toggle="dropdown">Dropdown <span class="caret"></span></a>
	<ul class="dropdown-menu" role="menu">
	<li><a href="#">Action</a></li>
	<li><a href="#">Another action</a></li>
	<li><a href="#">Something else here</a></li>
	<li class="divider"></li>
	<li class="dropdown-header">Nav header</li>
	<li><a href="#">Separated link</a></li>
	<li><a href="#">One more separated link</a></li>
	</ul>
	</li>
	</ul>
	</div>
	<!--/.nav-collapse -->
	</div>
	</div>

	<div class="container theme-showcase" role="main">

	<div class="alert alert-success">
	<h4 id="message" th:text="${action.actionMessages[0]}">File upload.</h4>
	</div>

	<form action="upload.html" name="uploadForm" id="uploadForm" th:attr="action=@{upload}" enctype="multipart/form-data" method="POST">
	<div class="alert upload" role="alert" ondragover="dragover(event)" ondragleave="dragleave(event)" ondrop="drop(event)">
	ファイルをここにドラッグ＆ドロップしてください。
	</div>
	</form>
	</div>
	</body>

	</html>