jokosusilo/Image Upload Preview

## Image Upload Preview
<!DOCTYPE html>
<!-- Based on HTML5 Bones | http://html5bones.com -->
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Page Title</title>
	<meta name="description" content="">
  <!-- Mobile-friendly viewport -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Style sheet link -->
	<style>
		::-webkit-scrollbar-track{
			-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
			background-color: #F5F5F5;
		}

		::-webkit-scrollbar{
			width: 6px;
			background-color: #F5F5F5;
		}

		::-webkit-scrollbar-thumb{
			-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2);
			background-color: #555;
		}
	</style>


</head>
<body>
	<form id="form1">
		<input type='file' id="imgInp" />
		<br>
		<img id="blah" src="http://allaccessmoving.com/wp-content/themes/thunder1/skins/images/preview.png" alt="your image" height="100"/>
	</form>
</body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
		 function readURL(input) {
	        if (input.files && input.files[0]) {
	            var reader = new FileReader();
	            reader.onload = function (e) {
	                $('#blah').attr('src', e.target.result);
	            }
	            reader.readAsDataURL(input.files[0]);
	        }
	    }

	    $("#imgInp").change(function(){
	        readURL(this);
	    });
	</script>
</html>
	<!DOCTYPE html>
	<!-- Based on HTML5 Bones \| http://html5bones.com -->
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Page Title</title>
	<meta name="description" content="">
	<!-- Mobile-friendly viewport -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Style sheet link -->
	<style>
	::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
	background-color: #F5F5F5;
	}

	::-webkit-scrollbar{
	width: 6px;
	background-color: #F5F5F5;
	}

	::-webkit-scrollbar-thumb{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2);
	background-color: #555;
	}
	</style>


	</head>
	<body>
	<form id="form1">
	<input type='file' id="imgInp" />
	<br>
	<img id="blah" src="http://allaccessmoving.com/wp-content/themes/thunder1/skins/images/preview.png" alt="your image" height="100"/>
	</form>
	</body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script>
	function readURL(input) {
	if (input.files && input.files[0]) {
	var reader = new FileReader();
	reader.onload = function (e) {
	$('#blah').attr('src', e.target.result);
	}
	reader.readAsDataURL(input.files[0]);
	}
	}

	$("#imgInp").change(function(){
	readURL(this);
	});
	</script>
	</html>