Cara Menampilkan File Gambar dari Form Inputan Menggunakan Javascript -

Untuk artikel kali ini karena ada request dari murid, ya sudah saya buatkan saja sekalian artikelnya seperti itu, jadi disini kita akan belajar cara menampilkan file gambar dari form inputan menggunakan javascript, tau ya teman-teman maksudnya seperti apa, jadi seperti ini, dimana nanti, saya membuat sebuah inputan form, dan ketika form itu kita ketikan nama file gambarnya lalu kita submit, maka akan tampil sebuah gambar dengan nama file yang tadi kita ketik di sebuah form inputan. oke seperti apa jangan kemana-mana simak terus ya teman-teman.

Ada yang perlu teman-teman perhatikan saat kita belajar cara menampilkan file gambar dari form inputan menggunakan javascript, dimana kita harus harus tau tempat gambar itu, misal ada di folder “image” jadi jika kita tempatkan di folder image, teman-teman harus mengetikan nama foldernya juga ya, karena value yang terdapat pada sebuah form adalah value dari sebuah atribute srcnya, maka dari disini saya sengaja menempatkan gambar itu sejajar dengan file indexnya, supaya yang saya ketikan di sebuah form inputan tersebut langsung nama file gambarnya, oke sekarang kita lihat cara membuatnya:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Cara Menampilkan file gambar dari form inputan menggunakan javascript</title>
	<style type="text/css">
		.container{
			width: 800px;
			margin: 0 auto;
		}
		input{
			width: 200px;
			padding: 3px;
			border: 1px solid #666;
			margin-bottom: 20px; 
		}
		button{
			width: 100px;
			padding: 3px;
			border: 1px solid #666;
		}
		button:hover{
			background-color: #333;
			color: white;
			cursor: pointer;
		}
		h1{
			text-align: center;
			border-bottom: 1px solid #666;
			padding-bottom: 20px;
		}

	</style>
</head>
<body>
<div class="container">
	<h1>Cara Menampilkan file gambar dari form inputan menggunakan javascript</h1>
	<form>
		<input type="text" name="" placeholder="masukan dengan file type">
		<button>insert</button>
	</form>
	<div class="demo"></div>
</div>
<script type="text/javascript">
	var form = document.forms[0] // pakai ini jika ingin menggunakan event submit
	
	var button = document.querySelector("button") //pakai ini jika ingin menggunakan event click
	var demo = document.querySelector(".demo")
	var input = document.querySelector("input")
	var imgEl = document.createElement("img");
	demo.appendChild(imgEl)

	form.addEventListener("submit", (e) =>{
		e.preventDefault()
		var valImg = input.value;
		imgEl.setAttribute("src", valImg)
		imgEl.setAttribute("style", "width: 800px")


	})
	input.addEventListener("keydown", ()=>{
		var tot = this.input;
		tot.style.border = "1px solid blue"
	})
	input.addEventListener("mouseout", ()=>{
		var tot = this.input;
		tot.style.border = "1px solid #666"
	})
</script>
</body>
</html>

dan silahkan teman-teman copya ya, kode di atas, teman-teman perhatikan kode yang ini:

form.addEventListener("submit", (e) =>{
		e.preventDefault()
		var valImg = input.value;
		imgEl.setAttribute("src", valImg)
		imgEl.setAttribute("style", "width: 800px")
	})

Fungsi ini lah yang membuat sebuah gambar bisa di tampilkan, jadi ketika button di klik, kita ambil valuenya, lalu kita gunakan method setAttribute dengan src ya, oke langsung saja kita lihat hasilnya:

Dan sekarang nama file gambar itu adalah dumet.jpg, jadi ketika saya megetikan dumet.jpg, dan saya submit, maka gambar itu pun tampil, okek seperti itu saja ya teman-teman dari saya semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.

Cara Menampilkan File Gambar dari Form Inputan Menggunakan Javascript

Kategori