JQUERY İLE RESİM UPLOAD ÖNİZLEME

<!doctype html>
<html lang="en">
<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>RESİM ÖNİZLEME</title> 

	<style type="text/css">
		body {
			width:100%;
			margin:0;
			height:100vh;
			display: flex; 
			align-items: center;
			flex-direction: column;
			padding-top:5rem;
			background: #fff;
			font-family:verdana 
		}
		.preview {
			width:30rem; 
			min-height:10rem;
			margin-top:2rem; 
			border:1px solid #eee;
			color:#eee;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 3rem;
		}
		input {
			width:30rem; 
			font-size: 0.8rem;
			border: 1px solid #ddd; 
			cursor:pointer;
			background: #eee; 
		}
		input:hover { border-color: #000; }
		input::file-selector-button {
			background: #dd3a00;
			color: #fff;
			padding: 1rem 2rem;
			border:none;
			cursor:pointer;
		}
		img {width:100%;}
		@media(max-width:600px) {html{font-size:11px}}  
	</style> 

</head> 
<body> 

	<input type="file" id="image" /> 
	<div class="preview"> RESİM ÖNİZLEME </div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 
	<script type="text/javascript">

		$("#image").change(function(){  
			var image=document.querySelector("#image");  
			if (image.files){  
				var veri=new FileReader();  
				veri.onload=function() { 
					var link=veri.result; 
					$('.preview').html('<img src="'+link+'"/>');  
				} 
				veri.readAsDataURL(image.files[0]); 
			} 
		});  

	</script>

</body> 
</html>

Tarayıcıda Aç

Son Güncelleme : 24 Nisan 2024 02:05, Çarşamba

YORUMLAR () YORUM YAZ

Yorum yapılmamış!

BENZER İÇERİK

JQUERY ile Tabloda Anlık Arama

06 Nisan 2021 12:58, Salı

JQUERY BAĞLANTISI NASIL YAPILıR?

02 Nisan 2024 23:36, Salı

JQUERY NEDİR?

03 Nisan 2024 09:52, Çarşamba