Upload gambar tanpa meload halaman dapat dilakukan dengan ajax. Dalam pemrograman web ini disebut dengan client side scripting dimana script dijalankan pada computer client.
Jquery menyediakan fasilitas ajax seperti jquery get(), jquery ajax(), jquery post() namun khusus untuk upload file dalam kasus kita ini upload gambar maka kita akan menggunakan library jquery form.
Pada tutorial ini Gambar akan diupload dan dikirim menggunakan jquery ajax, dimana php yang akan menangani proses uploadnya ke server.
Saya juga menambahkan progress bar yang akan memunculkan proses upload gambarnya telah sampai berapa persen sampai keberhasilan. Anda bisa download source code-nya pada akhir tutorial ini.
Langkah pertama adalah kita memanggil library jquery dan juga jquery form
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="http://malsup.github.com/jquery.form.js"></script>
Kemudian untuk progress barnya, tambahkan style css berikut:
#progress {
position:relative;
width:300px;
color:#111;
border: 1px solid #ddd;
padding: 1px;
border-radius: 3px;
display: none;
}
#bar {
background-color: #d2322d;
width:0%;
height:20px;
border-radius: 3px;
}
#percent {
position:absolute;
display:inline-block;
top:3px;
left:48%;
}
Membuat Form upload gambar
Sekarang kita buat dahulu form upload gambarnya seperti berikut:
<form id="form-upload" method="post" action="proses.php" enctype="multipart/form-data"> <input type="file" name="gambar" id="gambar" style="padding:5px;border:solid 1px #999"> <button style="cursor:pointer" type="submit" id="upload-gambar">Upload</button> <br> <br> <!-- untuk progress bar --> <div id="progress"> <div id="bar"></div> <div id="percent">0%</div> </div> <br/> <!-- pesan setelah proses upload --> <div id="message"></div> </form>
Membuat script jquery ajax untuk menangani pengiriman form
$(document).ready(function() {
//Foto
var options = {
beforeSend: function()
{
$("#progress").show();
$("#bar").width(‘0%’);
$("#message").html("");
$("#percent").html("0%");
$("#upload-gambar").attr("disabled",""); // Membuat button upload jadi tidak bisa terklik
},
uploadProgress: function(event, position, total, percentComplete)
{
$("#bar").width(percentComplete+’%’);
$("#percent").html(percentComplete+’%’);
},
success:function(data, textStatus, jqXHR) {
if ( data.trim() == "Sukses"){
$("#percent").html("100%");
$("#upload-gambar").removeAttr("disabled"); // Mengaktifkan kembali buton upload
//Jika anda ingin menghilang progress bar setelah upload selesai hilangkan komentar script dibawah ini
//$("#progress").hide();
$("#message").html(‘Berhasil mengupload Gambar’);
} else {
$("#progress").hide();
$("#message").html(data);
$("#upload-gambar").removeAttr("disabled");
$("#upload-gambar").html("Upload");
}
},
error: function()
{
$("#message").html("<span style=’color:red’> ERROR: Tidak dapat mengupload</span>");
}
};
// kirim form dengan opsi yang telah dibuat diatas
$("#form-upload").ajaxForm(options);
});
Anda bisa melihat penjelasannya pada script.
Apabila kode tersebut disatukan maka akan menjadi seperti berikut ini:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Upload Gambar</title>
</head>
<style>
#progress {
position:relative;
width:300px;
color:#111;
border: 1px solid #ddd;
padding: 1px;
border-radius: 3px;
display: none;
}
#bar {
background-color: #d2322d;
width:0%;
height:20px;
border-radius: 3px;
}
#percent {
position:absolute;
display:inline-block;
top:3px;
left:48%;
}
</style>
<body>
<form id="form-upload" method="post" action="proses.php" enctype="multipart/form-data">
<input type="file" name="gambar" id="gambar" style="padding:5px;border:solid 1px #999">
<button style="cursor:pointer" type="submit" id="upload-gambar">Upload</button>
<br>
<br>
<!-- untuk progress bar -->
<div id="progress">
<div id="bar"></div>
<div id="percent">0%</div>
</div>
<br/>
<!-- pesan setelah proses upload -->
<div id="message"></div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
$(document).ready(function() {
//Foto
var options = {
beforeSend: function()
{
$("#progress").show();
$("#bar").width(‘0%’);
$("#message").html("");
$("#percent").html("0%");
$("#upload-gambar").attr("disabled",""); // Membuat button upload jadi tidak bisa terklik
},
uploadProgress: function(event, position, total, percentComplete)
{
$("#bar").width(percentComplete+’%’);
$("#percent").html(percentComplete+’%’);
},
success:function(data, textStatus, jqXHR) {
if ( data.trim() == "Sukses"){
$("#percent").html("100%");
$("#upload-gambar").removeAttr("disabled"); // Mengaktifkan kembali buton upload
//Jika anda ingin menghilang progress bar setelah upload selesai hilangkan komentar script dibawah ini
//$("#progress").hide();
$("#message").html(‘Berhasil mengupload Gambar’);
} else {
$("#progress").hide();
$("#message").html(data);
$("#upload-gambar").removeAttr("disabled");
$("#upload-gambar").html("Upload");
}
},
error: function()
{
$("#message").html("<span style=’color:red’> ERROR: Tidak dapat mengupload</span>");
}
};
// kirim form dengan opsi yang telah dibuat diatas
$("#form-upload").ajaxForm(options);
});
</script>
</body>
</html>
Membuat script php upload gambar
Berikut adalah script php untuk menangani upload gambarnya yang dalam tutorial ini saya namakan proses.php
<?php
$dir_foto = "images/";
$filename = $_FILES[‘gambar’][‘name’];
$ext = pathinfo( $filename, PATHINFO_EXTENSION );
$ekstensi = array(‘jpg’,’jpeg’,’png’,’gif’,’JPG’); // Ektensi yg diterima
//filter ektensi gambar yang diterima
if( in_array( $ext, $ekstensi ) ) {
//maks ukuran gambar 500kb
if( $_FILES[‘gambar’][‘size’] < 524288 ) {
$filename = "foto-" . time() . "." .$ext;
if ( move_uploaded_file( $_FILES[‘gambar’][‘tmp_name’], $dir_foto . $filename ) ) {
echo "Sukses";
} else {
echo "Gagal";
}
} else {
echo "Ukuran gambar terlalu besar, maksimum 500kb.";
}
} else {
echo "Format file tidak didukung.";
}
?>
Demikian Cara upload gambar atau foto dengan php + jquery ajax, Semoga bisa dipahami.
Please follow and like us:
