A-pZ · August 29, 2015 14:07
diff --git a/upload.html b/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>