Wednesday, January 9, 2019

UPLOAD PROFILE IMAGE WITH PREVIEW USING HTML CSS JQUERY

Cloud Tech January 09, 2019 COMPUTER, WEB DESIGN

UPLOAD PROFILE IMAGE WITH PREVIEW USING HTML CSS JQUERY

|| Scroll Down For Source Code ||

Also read :AWESOME TRANSITION EFFECT USING HTML CSS

Also read :CREATE A SIMPLE WEB-PAGE USING HTML CSS

|| UPLOAD PROFILE PICTURE WITH PREVIEW USING HTML CSS JQUERY ||

Also read :HTML STYLISH SHARE BUTTON CODE FOR WEB & BLOGGER

Also read : STOCK AGE COUNT IN EXCEL EXCEL TRICKS

<!DOCTYPE html>
<html>
	<head>
		<title>Image Upload</title>
		<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
		<link rel="stylesheet" type="text/css" href="font-awesome.min.css">
		<style type="text/css">
			body{background: lightpink; font-family: arial;}
			.container{position: absolute;}
			h1{
				font-size: 20px;
				text-align: center;
				margin: 20px;
			}
			small{
				display: block;
				font-size: 15px;
				padding-top: 8px;
				color: steelblue;
			}
			.avatar-upload{
				position: relative;
				max-width: 205px;
				margin: auto;
			}
			.avatar-edit{
				position: absolute;
				right: 0;
				left: 145px;
				z-index: 1;
				top: 10px;
			}
			input{display: none;}
			label{
				display: inline-block;
				width: 34px;
				height: 34px;
				margin-bottom: 0;
				border-radius: 100%;
				border:2px solid transparent;
				background:#ebe856;
				box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.12);
				cursor: pointer;
				font-weight: normal;
				transition: all .2s ease-in-out;
			}
			label:hover{
				background:#00000082;
				border-color: yellow;
			}
			label:after{
				content: "\f0f0";
				font-family: 'font-awesome';
				color: blue;
				position: absolute;
				top: 7px;
				right: 173px;
				font-size: 20px;
				text-align: center;margin: auto;
			}
			.avatar-preview{
				width: 192px;
				height: 192px;
				position: relative;
				border:2px solid #f52525;
				border-radius: 100%;
				box-shadow: 0px 0px 0px 3px lightblue;
			}
			div{
				width: 100%;
				height: 100%;
				border-radius: 100%;
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
			}
			.h5image{
				margin: auto;
				color: purple;
				text-align: center;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h1>
Profile Img Upload<small>With Preview</small><small>Using HTML Css & jQery</small></h1>
<div class="avatar-upload">
				<div class="avatar-edit">
					<input type="file" id="imageUpload" accept=".png, .jpg, .jpeg">
					<label id="penback" for="imageUpload"></label>
				</div>
<div class="avatar-preview" id="avatar-preview">
					<div id="imagePreview" style="background-image: url(ava.jpg);">
</div>
</div>
<div class="h5image">
					<h5 id="mgs">
 Max-Image Size 2MB</h5>
</div>
</div>
</div>

		<script type="text/javascript">
		$("#imageUpload").change(function () {
		var fileSize = this.files[0];
		var sizeInMb = fileSize.size;
		
		var sizeLimit= 2*1024*1024;
		
		var sizemb = sizeInMb/1024/1024;
		var sizekb = sizeInMb/1024;
		
		var ifsize =   1024*1024*1;
		var fsizemb = sizemb.toString().split('.')[0];
		var fsizekb = sizemb.toFixed(3);
		if (sizeInMb < sizeLimit) {
		
		if(sizeInMb > ifsize)
		{
		$("#mgs").html("Good Image "+fsizemb+" mb");
		$("#mgs").css("color", "purple");
		$("#penback").css("background","grey");
		$("#avatar-preview").css("box-shadow","0px 0px 2px 2px yellow");
		}
		else
		{
		$("#mgs").html("Good Image "+fsizekb+" kb");
		$("#mgs").css("color", "purple");
		$("#penback").css("background","grey");
		$("#avatar-preview").css("box-shadow","0px 0px 2px 3px yellow");
		}
		}
		else {
		$("#mgs").html("Image Too Large "+fsizemb+" mb");
		$("#mgs").css("color", "purple");
		$("#penback").css("background","grey");
		$("#avatar-preview").css("box-shadow","0px 0px 2px 3px yellow");
		}
		});
		</script>
		<script type="text/javascript">
		
		function readURL(input) {
		if (input.files[0]) {
		var reader = new FileReader();
		reader.onload = function(e) {
		$('#imagePreview').css('background-image', 'url('+e.target.result+')');
		$('#imagePreview').hide();
		$('#imagePreview').fadeIn(650);
		}
		reader.readAsDataURL(input.files[0]);
		}
		}
		$("#imageUpload").change(function() {
		readURL(this);
		});
		</script>
	</body>
</html>

About Cloud Tech
Cloud-Tech is a Entertainment site is a provider of Bascic Knolwedge on Computer, Mobile, Festival, Life Changing Quotes Wishes. The main mission of Cloud-Tech is to provide the Updated News On Technology.