Cara Sederhana Upload Gambar Dengan Jquery

Pada kesempatan kali ini saya akan membahas tentang cara upload gambar sederhana dengan jquery. Dalam kasus ini gambar yang akan dipilih akan langsung ditampilkan secara langsung tanpa harus disimpan terlebih dahulu, bagaimana cara membuatnya silahkan ikuti step-stepnya berikut ini:

Langkah pertama silahkan buat file php terlebih dahulu lalu ketikkan file seperti dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
	<div class="container my-5">
		<div class="row">
			<div class="col-md-3">
				<h3>Foto Profile</h3>
				<form action="upload.php" method="post" enctype="multipart/form-data">
				<input type="file" id="gambar" class="input mb-2">
				</form>
				<div class="border border-dark text-center" id="view-image"></div>				
			</div>
		</div>
	</div>

pada code diatas ada sebuah form input type=file ,digunakan untuk upload file. serta ada sebuah id=”view-image untuk menampilkan gambar yang di[ilih.

Langkah kedua membuat untuk mengunggah gambar dan menampilkan menggunakan jQuery AJAX Script ini berisi event change (function) untuk menganti gambar yang ingin di upload tanpa refresh. coba perhatikan code dibawah ini:

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
	<script>
		$('#gambar').change(function() {
			var data = new FormData();
			data.append('file', $('#gambar')[0].files[0]);
			$.ajax({
				url:'upload-file.php',
				type:'POST',
				data:data,
				processData:false,
				contentType:false,
				beforeSend:function(){
					$('#view-image').html('Loading...');
				},
				success:function(data){
					// alert(data);
					$('#view-image').html('<img src="'+data+'" style="width:250px" alt="Avatar" />');
				}
			});
				return false;
			});
		
	</script>

Pada code diatas proses upload gambar pada file upload-file.php ,silahkan ketikkan code dibawah ini dan jangan lupa simpan sesuai nama file yang dibuat :

<?php 

	if(isset($_FILES['file'])){
		$file = $_FILES['file'];
		if ( move_uploaded_file($file['tmp_name'], $file['name'])){
			echo $file['name'];
		}
	}


 ?>

Saya kira cukup sekian pembahasan artikel kali ini tentang Cara Sederhana Upload Gambar Dengan Jquery, silahkan mencoba lalu ikuti setiap step-step yang sudah diberikan ,sampai jumpa kembali dengan pembahasan lainnya dan semoga bermanfaat.

terima kasih

Cara Sederhana Upload Gambar Dengan Jquery

Kategori