umerata
8/11/2017 - 10:17 AM

Live image upload preview | label-js

Live image upload preview

Live upload
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

	<title>Testing Page</title>
	
	<!-- Normalize.css -->
	<link rel="stylesheet" href="https://necolas.github.io/normalize.css/6.0.0/normalize.css">

	<!--
	// Optional Bootstrap
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -
	-->

	<!-- Your Css -->
	<style>
		body{
			padding:50px;
		    font-family: sans-serif;
		}		

		#imgPreview{
			width:200px;
			height:200px;
			/*background-size:100% 100%;*/
			background-size:cover;
			background-repeat:no-repeat;
			border:1px solid #ccc;
		}
	</style>
</head>
<body>

	<h1>Live Image Upload</h1>

	<p>Picture Preview</p>
	<div id="imgPreview"></div>

	<!-- Picture Upload BuUtton -->
	<input type="file"  id="image-input" value="" name="image-input"  />
	<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
	<!-- 
	// Optional Bootstrap	
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>	
	-->
	<script>
		$(document).ready(function(){

			// Function to preview image on image area
		      function readURL(input) {
		        if (input.files && input.files[0]) {
		          var reader = new FileReader();
		          reader.onload = function (e) {
		            $('#imgPreview').css('background-image', 'url('+e.target.result+')');

					// Code to get the dimentions of image
					/*
						var i = new Image(); 
						i.onload = function(){
						 	alert( i.width+", "+i.height );
						};
						i.src = e.target.result; 
					*/

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

			$("#image-input").change(function(){
			    readURL(this);
			});

		})
	</script>
</body>
</html>