upload.jsp

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen"
	href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" />
<style>
a.fancybox img {
	border: none;
	box-shadow: 0 1px 7px rgba(0, 0, 0, 0.6);
	-o-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	-moz-transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

a.fancybox:hover img {
	position: relative;
	z-index: 999;
	-o-transform: scale(1.03, 1.03);
	-ms-transform: scale(1.03, 1.03);
	-moz-transform: scale(1.03, 1.03);
	-webkit-transform: scale(1.03, 1.03);
	transform: scale(1.03, 1.03);
}

#thumb {
	height: 200px;
	widht: 200px;
	border: 1px solid #000;
	margin: 10px 5px 0 0;
}

input[type="text"], input[type="date"], input[type="time"], textarea {
	background-color: #F5F5DC !important;
}

.aaa {
	width: 30%;
	padding-left: 20px;
}

.bbb {
	padding-left: 20px;
}

.banner {
	padding: 40px 0px;
	background-color: #E00049;
}

.ccc {
	width: 13%;
	height: auto;
	padding-left: 20px;
}
</style>

<!-- <script src="js/bootstrap-datetimepicker.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
-->

</head>


<body>
	<script type="text/javascript"
		src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script type="text/javascript"
		src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	<script type="text/javascript"
		src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>

	<div class="banner">
		<img class="ccc"
			src="https://intranet.ucll.be/sites/all/themes/ucll/images/logos/logoHeader.png">
	</div>
	<h1 class="bbb">File Upload Form</h1>
	<fieldset>
		<legend class="bbb">Upload File</legend>
		<c:if test="${not empty errors}">
			<div class="alert-danger">
				<ul>
					<c:forEach var="error" items="${errors}">
						<li>${error}</li>

					</c:forEach>
				</ul>
			</div>
		</c:if>

		<form method="post" action="Controller?action=upload"
			enctype="multipart/form-data">
			<div class="aaa">
				<div class="form-group">
					<label for="naam">Naam:</label><input type="text" name="naam"
						id="naam" class="form-control"> <label for="content">Content:</label>
					<textarea rows="5" cols="20" name="content" id="content"
						class="form-control"></textarea>
				</div>
			</div>
			<div class="aaa">
				<div class="form-group">
					<p>
						<i>Datum voorbeeld: yyyy-MM-dd zoals bijvoorbeeld: 2016-02-24</i>
					</p>
					<label for="startDatum">Begin datum:</label><input type="date"
						name="startDatum" id="startDatum" class="form-control">
				</div>
			</div>

			<div class="aaa">
				<div class="form-group">
					<p>
						<i>Tijd voorbeeld: 11:34</i>
					</p>
					<label for="startTijd">Start tijd:</label><input type="time"
						name="startTijd" id="startTijd" class="form-control">
				</div>
			</div>
			<div class="aaa">
				<div class="form-group">
					<p>
						<i>Datum voorbeeld: yyyy-MM-dd zoals bijvoorbeeld: 2016-02-24</i>
					</p>
					<label for="eindDatum">Eind datum:</label><input type="date"
						name="eindDatum" id="eindDatum" class="form-control">
				</div>
			</div>
			<div class="aaa">
				<div class="form-group">
					<label for="eindTijd">Eind tijd:</label><input type="time"
						name="eindTijd" id="eindTijd" class="form-control"><br>
				</div>
			</div>


			<!-- 			<label for="datetime"><input id="datetime" type="datetime-local"/></label>
 -->
			<!-- 			<input type="hidden" name="action" value="upload">
 -->
			<div class="bbb">

				<div class="form-group">
					<label for="fileName">Select File: </label> <input id="fileName"
						type="file" name="fileName" size="30" /><br /> <a
						href="#myPopup" data-rel="popup" data-position-to="window" onclick="alert"><img
						id="thumb" src="#" alt="img" /> </a> <br /> <br /> <input
						type="submit" value="Upload" />


					<script>
						function readURL(input) {

							if (input.files && input.files[0]) {
								var reader = new FileReader();

								reader.onload = function(e) {
									$('#thumb').attr('src', e.target.result);
								}

								reader.readAsDataURL(input.files[0]);
							}
						}

						$("#fileName").change(function() {
							readURL(this);
						});
					</script>
				  	<script type="text/javascript">

						$(function($) {
							var addToAll = true;
							var gallery = false;
							var titlePosition = 'inside';
							$(addToAll ? 'img' : 'img.fancybox')
									.each(
											function() {
												var $this = $(this);
												var title = $this.attr('title');
												var src = $this
														.attr('data-big')
														|| $this.attr('src');
												var a = $(
														'<a href="#" class="fancybox"></a>')
														.attr('href', src)
														.attr('title', title);
												$this.wrap(a);
											});
							if (gallery)
								$('a.fancybox').attr('rel', 'fancyboxgallery');
							$('a.fancybox').fancybox({
								titlePosition : titlePosition
							});
						});
						$.noConflict();
					</script>
				</div>
			</div>


		</form>
	</fieldset>
</body>
</html>