Tutorial yang akan aku bagikan kali ini mengenai cara membuat uploader gambar menggunakan Ajax dan PHP. Sebenarnya tidak hanya itu yang dibutuhkan. Kita masih juga membutuhkan JQuery, CSS, dan HTML. Tutorial ini kubuat karena ternyata memang masih banyak yang kesulitan untuk mengupload gambar atau file lain melalui ajax. Rata-rata cara upload gambar yang ada di internet langsung eksekusi lewat PHP. Entah menggunakan method POST ataupun GET.
Nah! Kebetulan kali ini aku mau buat tutorial yang mungkin bisa bermanfaat bagi pembaca sekalian. Langsung saja kita mulai.
Langkah pertama, kita siapkan form terlebih dahulu untuk menghandel pengguna di sisi klien. Kita buat sebuah file dengan nama index.html atau index.php. Lalu tambahkan tag input dan button di dalamnya.
<form id="gambar">
<div class="form-group">
<label for="input-gambar">Pilih Gambar</label>
<input type="file" class="form-control" name="gambar" accept="image/jpeg"/>
</div>
</form>Pada form di atas, beberapa hal yang perlu diperhatikan adalah id form dalam hal ini, aku menggunakan nama id gambar id=”gambar” , name pada tag input (aku menggunakan gambar). Nama id form dengan name pada tag input tidak harus sama. Terakhir adalah atribut accept (pada contoh diatas valuenya adalah image/jpeg). Atribut ini untuk mencegah pengguna untuk memilih file yang tidak diperbolehkan untuk diupload. Dengan menambahkan atribut ini maka semua file yang mime typenya tidak didefinisikan tidak akan tampak.
Kedua, kita buat sebuah tombol dengan id upload.
<button id=”upload” class=”btn btn-info”>Upload</button>
Id tombol atau button di atas nanti akan digunakan untuk selector jQuery.
Ketiga, buat sebuah div dengan id/class tampil-gambar. Pada tutorial ini, aku menggunakan id.
<div class=”tampil-gambar”></div>
Keempat, pastikan jQuery atau file pendukung lainnya sudah siap atau sudah diincludkan. Setelah itu, kita buat handlernya ketika tombol upload diklik menggunakan jQuery.
$(function () {
$("#upload").on("click", function () {
kode selanjutnya di sini...
});
});Perlu diperhatikan:
$(function(){ }); bisa diganti dengan $(document).ready(function(){ });
$(“#upload”).on(“click”, function(){ }); tidak bisa diganti dengan $(“#upload”).click(function(){ }); Meskipun keduanya sama-sama bisa menghandel event tetapi hasilnya berbeda. Jika diganti dengan kode yang kedua tersebut maka data gambar tidak bisa dikirim menggunakan ajax. Dalam kata lain, data yang dikirimkan selalu kosong (empty).
Selanjutnya, kita mengambil data gambar dari tag input kemudian disimpan ke dalam variabel data (namanya tidak harus data).
var data = new FormData($(“#gambar”)[0]);
Membuat variabel untuk tomboal agar lebih mudah memanipulasinya.
var btn = $(this);
Ketika tombol diklik, kita rubah teksnya menjadi memroses… atau teks lainnya.
btn.html(“<i class=’fa fa-spin fa-spinner’></i> Memroses…”);
Keterangan: kombinasi class fa fa-spin fa-spinner akan menampilkan ikon oval yang berputar. Untuk menggunakan class ini dibutuhkan Font Awesome. jika font tersebut tidak ada, tidak akan merusak tampilan. Hanya ikon berputar tidak tampak.
Selanjutnya kita cek dulu apakah pengguna sudah memilih gambar apa belum. Jika belum, maka ketika tombol upload diklik kita tampilkan alert/pemberitahuan kalau gambar belum dipilih. Sebaliknya kalau sudah memilih gambar dan klik tombol upload maka kita eksekusi ajax untuk upload. Logika untuk ngecek pengguna sudah memilih gambar atau belum seperti di bawah ini:
if ($("#gambar input[type=file]").get(0).files.length!==0) {
alert("Anda Belum Memilih Gambar");
}
else{
Eksekusi ajak di sini...
}Cara di atas bisa disederhanakan. Namun, agar tutorial ini bisa dipahami berbagai karakter dan pengetahuan pembaca maka dibiarkan seperti itu biar mudah dipahami.
Selanjutnya kita buat ajaxnya untuk menangani pengiriman data gambar ke php dan mengambil hasilnya untuk ditampilkan ke pengguna. Script ajax tersebut adalah:
$.ajax({
url: "data.php",
method: "post",
cache: false,
contentType: false,
processData: false,
data: data,
success: function (msg) {
if (msg === "0") {
alert("Upload Gagal!");
} else {
setTimeout(function ()
{
$(".tampil-gambar").html("<img class='img-responsive img-thumbnail img-circle' src='gambar/" + msg + "?foo=" + new Date().getTime() + "'/>");
}, 500);
}
btn.html("Upload");
}
});Yang perlu diperhatikan dalam script ajax di sini adalah penggunaan cache: false, contentType: false, processData: false. Tanpa ketiganya, data yang dikirimkan ajax adalah 0 alias kosong.
Kedua penggunaan fungsi setTimeout() digunakan untuk menampilkan gambar ketika gambar yang diupload berbeda namun di server namanya sama (overwrite). Tanpa menggunakan fungsi ini sebenarya bisa. Cukup menambahkan random kueri url seprti contoh do atas yaitu “?foo=”+new Date().getTime() dengan menambahkan kueri url dengan value yang unik maka gambar akan tetap berubah meskipun namanya ketika diupload ke server sama seperti gambar sebelumnya(overwrite).
Terakhir adalah handler untuk upload dari sisi server menggunakan PHP. Buat file PHP dengan nama data.php di folder yang sama dengan index.html atau index.php. Ketikkan script berikut:
$file = !empty($_FILES['gambar']) ? $_FILES['gambar'] : null; // digunakan untuk mengambil data gambar
if (!$file || !$file['size'])exit('0'); // ketika ukuran/size gambar kosong langsung exit.
if ($file['error'])exit("0"); // ketika proses upload error langsung exit
if (!preg_match('~/jp(e|)g$~', $file['type']))exit("0"); // ketika tipe file tidak jpg/jpeg exit
if (!is_dir("gambar/"))exit("0"); // jika folder gambar tidak ada langsung exit.
$nama = 'gambar.jpg';
if (move_uploaded_file($file["tmp_name"], 'gambar/' . $nama)) {
echo $nama;
}Keterangan: Angka 0 (nol) bisa diganti dengan keterangan error sesuai jenisnya masing-masing dan ditampilkan ke klien melalui ajax respose.
Script index.php atau index.html lengkap adalah seperti ini:
<!DOCTYPE HTML>
<html>
<head>
<link href="https://nusagates.com/demo/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://nusagates.com/demo/style.css" rel="stylesheet">
<script src="https://nusagates.com/demo/js/jQuery-2.1.4.min.js"></script>
<title>Demo Nusagates</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Demo</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav><div class="container">
<div class="starter-template">
<h1>Upload File Dengan jQuery - Ajax - PHP</h1>
<p class="lead">
Demo upload file menggunakan jQuery, Ajax, dan PHP bisa dilihat dan dicoba pada demo di bawah ini. <br/><br/><hr/>
<div class="row text-left">
<div class="col-md-6">
<form id="gambar">
<div class="form-group">
<label for="input-gambar">Pilih Gambar</label>
<input type="file" class="form-control" name="gambar" accept="image/jpeg"/>
</div>
</form>
<button id="upload" class="btn btn-info">Upload</button>
</div>
<div class="col-md-6">
<div class="tampil-gambar"></div>
</div>
</div>
</p>
</div>
</div>
<script>
$(function () {
$("#upload").on("click", function () {
var data = new FormData($("#gambar")[0]);
var btn = $(this);
btn.html("<i class='fa fa-spin fa-spinner'></i> Memroses...");
if ($("#gambar input[type=file]").get(0).files.length!==0) {
$.ajax({
url: "data.php",
method: "post",
cache: false,
contentType: false,
processData: false,
data: data,
success: function (msg) {
if (msg === "0") {
alert("Upload Gagal!");
} else {
setTimeout(function ()
{
$(".tampil-gambar").html("<img class='img-responsive img-thumbnail img-circle' src='gambar/" + msg + "?foo=" + new Date().getTime() + "'/>");
}, 500);
}
btn.html("Upload");
}
});
}
else{
alert("Silahkan pilih gambar");
btn.html("Upload");
}
});
});
</script>
<script src="https://nusagates.com/demo/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>Demo Upload gambar menggunakan Ajax dan PHP ini bisa dilihat di halaman ini. Jika ada pertanyaan lebih lanjut atau ada kendala ketika mencoba tutorial ini bisa menghubungi admin melalui kolom komentar, Google Hangout atau email ke nusagates@gmail.com, atau melalui sosial media yang tersedia. Terimakasih telah berkenan mampir.
Cheers
Nusagate
