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 ||

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

<!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.

Cloud-Tech

Follow Us

2019 Delighted Offer

Translate

Wednesday, January 9, 2019

UPLOAD PROFILE IMAGE WITH PREVIEW USING HTML CSS JQUERY

UPLOAD PROFILE IMAGE WITH PREVIEW USING HTML CSS JQUERY

Pages

Most Recent

Categories

Popular

About & Social

Cloud-tech

About

Link list 3

Tags

Categories

Popular Posts

Cloud-Tech

Follow Us

2019 Delighted Offer

Translate

Wednesday, January 9, 2019

UPLOAD PROFILE IMAGE WITH PREVIEW USING HTML CSS JQUERY

UPLOAD PROFILE IMAGE WITH PREVIEW USING HTML CSS JQUERY

Subscribe via email

Pages

Most Recent

Categories

Popular

About & Social

Cloud-tech

About

Link list 3

Tags

Categories

Popular Posts