ahvonenj · October 7, 2015 09:47
diff --git a/svgviewer.html b/svgviewer.html
 <!doctype html>
 <html>
 	<head>
 		<title>svgviewer</title>

 		<style>
 			*
 			{
 				margin: 0;
 				padding: 0;
 			}

 			html, body
 			{
 				width: 100%;
 				height: 100%;
 			}

 			#dropzone
 			{
 				width: 100%;
 				height: 100%;
 				background-color: #2c3e50;
 				padding: 15px;
 				box-sizing: border-box;
 			}

 			#dropzone h1
 			{
 				font-size: 28px;
 				font-family: Roboto, Consolas, Arial;
 				color: white;
 			}
 		</style>

 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
 		<script>
 			$(document).ready(function()
 			{
 				console.log(1);
 				$('#dropzone').on('drop', function(e)
 				{
 					e.preventDefault();

 					$('#dropzone').empty();

 					var files = e.originalEvent.dataTransfer.files;
 					var file = files[0];

 					for (var i = 0, f; file = files[i]; i++) 
 					{
 						var reader = new FileReader();

 						reader.onload = (function(theFile) 
 						{
 							return function(e) 
 							{
 								var $img = '<img src = "' + e.target.result + '" alt = "" />';
 								$('#dropzone').append($img);
 							};
 						})(file);

 						reader.readAsDataURL(file);
 					}

 					return false;
 				});

 				$('#dropzone').on('dragenter',function(e)
 				{
 				    e.preventDefault();
 				});

 				/*$('.drop').on('dragleave',function(){
 				    $(this).html('drop here').css('background','red');
 				})*/

 				$('#dropzone').on('dragover',function(e)
 				{
 				    e.preventDefault();
 				});
 			});
 		</script>
 	</head>
 	<body>
 		<div id = "dropzone">
 			<h1>Droppaa svg(t) tähän</h1>
 		</div>
 	</body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>svgviewer</title>

	<style>
	*
	{
	margin: 0;
	padding: 0;
	}

	html, body
	{
	width: 100%;
	height: 100%;
	}

	#dropzone
	{
	width: 100%;
	height: 100%;
	background-color: #2c3e50;
	padding: 15px;
	box-sizing: border-box;
	}

	#dropzone h1
	{
	font-size: 28px;
	font-family: Roboto, Consolas, Arial;
	color: white;
	}
	</style>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
	<script>
	$(document).ready(function()
	{
	console.log(1);
	$('#dropzone').on('drop', function(e)
	{
	e.preventDefault();

	$('#dropzone').empty();

	var files = e.originalEvent.dataTransfer.files;
	var file = files[0];

	for (var i = 0, f; file = files[i]; i++)
	{
	var reader = new FileReader();

	reader.onload = (function(theFile)
	{
	return function(e)
	{
	var $img = '<img src = "' + e.target.result + '" alt = "" />';
	$('#dropzone').append($img);
	};
	})(file);

	reader.readAsDataURL(file);
	}

	return false;
	});

	$('#dropzone').on('dragenter',function(e)
	{
	e.preventDefault();
	});

	/*$('.drop').on('dragleave',function(){
	$(this).html('drop here').css('background','red');
	})*/

	$('#dropzone').on('dragover',function(e)
	{
	e.preventDefault();
	});
	});
	</script>
	</head>
	<body>
	<div id = "dropzone">
	<h1>Droppaa svg(t) tähän</h1>
	</div>
	</body>
	</html>