Membuat Upload File Gambar Dengan Ajax Javascript Part1

Haloo teman-teman Dumet school. Kembali lagi dengan saya di kursus web design. Nah kali ini saya akan membahas tentang cara Membuat Upload File gambar Dengan Ajax Javascript Part1. Dimana file yang kita akan upload tentu harus berformat jpg, png, jpeg atau gif. Dan metode yang akan kita pakai adalah XMLHttpRequest.

Oke Langsung saja untuk dapat Membuat Upload File Gambar Dengan Ajax Javascript Part1 kita buat dahulu struktur htmlnya seperti berikut ini.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AJAX Native.</title>
	<style>
		body {
			margin: 5%;
			font-family: sans-serif;
		}

		.error {
			color: red; 
background: #dff0d8;
			padding: 5px;
		}

		.form-group {
			margin-bottom: 5px
		}

		.alert-success {
			background: #dff0d8;
			padding: 5px; 
			color: #3c763d
		}
	</style>
</head>
<body>
	
<h3> Membuat Upload File Gambar Dengan Ajax Javascript Part1</h3>
<div><p>Upload Gambar</p></div>
<form id="form-upload" >
	<div class="form-group">
		<input type="file" name="file">
	</div>
	<button type="submit">Submit</button>
</form>
<ul id="items"></ul>
</body>
</html>

<!DOCTYPE html>

<head>

<title>AJAX Native.</title>

<style>

body {

margin: 5%;

font-family: sans-serif;

}

.error {

color: red;

background: #dff0d8;

padding: 5px;

}

.form-group {

margin-bottom: 5px

}

.alert-success {

background: #dff0d8;

padding: 5px;

color: #3c763d

}

</style>

</head>

<body>

<h3> Membuat Upload File Gambar Dengan Ajax Javascript Part1</h3>

<div><p>Upload Gambar</p></div>

</div>

<button type="submit">Submit</button>

</form>

</body>

</html>

Nah jika sudah teman-teman simpan filenya dengan format php. Sebelum kita masuk untuk membuat script ajax javascriptnya saya akan menjelaskan alur atau flownya dalam membuat upload gambar. Jadi ketika saya select file dengan format bukan jpg, png, jpeg atau gif maka aka ada pesan error yang saya tampilkan. Sedangkan jika format file berbentuk jpg, png, jpeg atau gif maka akan tampil pesan sukses bahwa gambar berhasil di upload dan filenya akan muncul di dalam tag ul dengan nama id items.

Oke teman-teman dumet school, sekarang kita buat beberapa variable selectornya yang nanti akan kita butuhkan. Berikut scripnya ya, teman-teman bisa buat di bawah sebelum penutup tag body.

<script>
const _form = document.getElementById("form-upload");
let fileField = document.querySelector("input[type='file']");
const _elemen = document.getElementById("items");
let popup = _form.previousElementSibling

let _data = new FormData(_form);
var http = new XMLHttpRequest();
</script>

const _form = document.getElementById("form-upload");

let fileField = document.querySelector("input[type='file']");

const _elemen = document.getElementById("items");

let popup = _form.previousElementSibling

let _data = new FormData(_form);

var http = new XMLHttpRequest();

</script>

Ada beberapa selector yang harus kita siapkan. Yang pastinya adalah form, input type file lalu tag ul dengan nama id items untuk kita menampilkan gambarnya, kemudian kita buat selector untuk menampilkan pesan sukses dan errornya. Kemudian disini saya buat variable untuk menampung suatu nilai atau data menggunakan objek dari FormData() dan terakhir saya melakukan XMLHttpRequest().

Sampai disini dulu pembahasan kita tentang Membuat Upload File Gambar Dengan Ajax Javascript Part1. Saya akan lanjutkan di pembahasan berikutnya yaitu part2.

Membuat Upload File Gambar Dengan Ajax Javascript Part1

Facebook DUMET School

Categories