Jurnal Web .com

Tutorial cara upload foto dengan AJAX jQuery dan PHP | Website yang interaktif dan responsif saat ini sudah menjadi sebuah keharusan, website yang bisa digunakan secara efektif sangat disukai oleh pengunjung. Oleh sebab itu kecepatan sangat penting untuk diperhatikan oleh setiap pemilik website.

Salah satu kebutuhan lain yang sering ada di aplikasi website adalah fitur yang memungkinkan pengguna untuk mengupload gambar atau foto, baik itu untuk kebutuhan melengkapi artikel, melengkapi foto profil atau membuat galeri foto.

Tentu akan sangat menyenangkan jika pengguna bisa melakukan upload foto dengan lebih ringkas dan efektif dengan memanfaatkan teknologi AJAX (Asynchronous JavaScript and XML), sehingga pengunjung tidak perlu untuk berpindah halaman, tidak perlu adanya refresh dan tidak perlu merasakan loading.

– Baca juga: Keuntungan dan kerugian menggunakan AJAX pada website

Cara Upload Gambar dengan AJAX dan PHP

Pada kesempatan sebelumnya kita sudah pernah membahas bagaimana cara upload file gambar dengan PHP saja, nah pada kesempatan kali ini Jurnalweb.com akan membahas bagaimana cara upload foto dengan PHP dan AJAX. Bantuan jQuery sangat memudahkan kita dalam pembuatan fitur seperti ini.

Buat Form Upload

Pertama buat terlebih dahulu form untuk upload dan sebuah lokasi untuk tempat menaruh gambar yang sudah di upload nantinya.

<div class="container">
	<form id="uploadForm" action="upload.php" method="post">
		<div id="targetPhoto">No Image</div>
		<div id="uploadFormContent">
			<label>Upload Foto Anda:</label><br/>
			<input name="userImage" type="file" class="inputFile" />
			<input type="submit" value="Submit" class="btnSubmit" />
		</div>
	</form>
</div>

Desain tampilan dengan CSS

Setelah membuat wadah upload foto, kita selanjutnya mempercantik wadah upload tersebut dengan bantuan CSS agar terlihat lebih menarik dan teratur.

body {
	font-family: Arial;
	font-size: 14px;
}

.container {
	width: 500px;
	height:150px;
	margin: 50px auto;
	background: #ddd;
}

#targetPhoto{
	float:left;
	width:150px;
	height:150px;
	text-align:center;
	line-height:150px;
	font-weight: bold;
	color: #C0C0C0;
	background-color: #333;
	overflow:auto;
}

#uploadFormContent{
	float:right;
	padding: 35px 20px;
}
#uploadFormContent label{
	font-weight: bold;
	color: #333;
	font-size: 18px;
}
.btnSubmit {
	background-color: green;
	padding:10px;
	border: #3FA849 1px solid;
	color: #FFFFFF;
}
.inputFile {
	padding: 9px;
	background-color: #FFFFFF;
}

Tambahkan Script jQuery Ajax

Sisipkan terlebih dahulu script jQuery pada bagian [head], Lalu karena kita akan mengupload foto tersebut dengan AJAX sehingga tidak ada transisi berpindah halaman atau refresh, maka kita perlu tambahkan script jQuery untuk melakukan hal tersebut, yaitu untuk mengirim form ke file upload.php. Taruh script ini dibagian header, tepat setelah jquery di load.

$(document).ready(function (e) {
	$("#uploadForm").on('submit',(function(e) {
		e.preventDefault();
		$.ajax({
        	url: "upload.php",
			type: "POST",
			data:  new FormData(this),
			contentType: false,
    	    cache: false,
			processData:false,
			success: function(data)
		    {
			$("#targetPhoto").html(data);
		    },
		  	error: function() 
	    	{
	    	} 	        
	   });
	}));
});

Script PHP untuk proses upload

Script ini untuk menangani file yang dikirim lewat form dengan bantuan jQuery Ajax agar bisa dilakukan proses upload. Karena untuk keperluan upload file ini kita sangat memerlukan PHP. File yang sudah diupload akan disimpan pada direktori images, kemudian ditampilkan dengan tag img src di html.

if(is_array($_FILES)) {
	if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
		$sourcePath = $_FILES['userImage']['tmp_name'];
		$targetPath = "images/".$_FILES['userImage']['name'];
		if(move_uploaded_file($sourcePath,$targetPath)) {
?>
			<img src="<?php echo $targetPath; ?>" width="150px" height="150px" />
<?php
		}
	}
}

Download

Jika Anda tertarik ingin melihat script lengkapnya dan mencobanya langsung, Anda bisa download dan taruh di server Anda untuk mencobanya.

Semoga bermanfaat, lain kali kita akan lanjutkan dan lengkapi tutorial ini dengan proses delete yang juga dilakukan dengan AJAX.

Artikel Lain:

Tutorial Cara Validasi Email dengan AJAX jQuery dan PHP Apakah Bahasa Pemrograman PHP Sudah Mati? Cara Membuat Short URL dengan PHP dan Bit.ly API Cara Validasi Alamat Email dengan PHP Tutorial Cara Membuat Contact Form dengan PHP Terkirim ke Email Cara Mendapatkan Ranking Alexa dengan PHP Cara Backup Website dan Database MySQL dengan PHP exec() Cara Show Hide Password dengan Javascript Kunci Konten Web Agar Tidak Bisa di Edit di Inspect Element / Developer Tool Membuat tombol scroll ke atas (back to top) dengan jQuery Mencegah Submit Form Berulang Kali dengan Jquery & PHP Cara Membuat Background Slideshow dengan Jquery