Oke, pada sore hari ini saya akan membahas tentang upload gambar dengan php tanpa reload atau biasa disebut dengan teknik ajax.Disini saya tidak akan menjelaskan apa itu ajax, karena saya anggap kalian sudah tahu apa itu ajax, atau bisa juga kalian cari di google lah, kan banyak.
Yup, langsung saja pertama-tama kalian copy script dibawah ini lalu save dan berikan nama filenya index.php
<!Doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Upload gambar dengan Ajax dan PHP</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="container">
<h1 align="center">Upload gambar dengan Ajax dan PHP | Biongo Attacker</h1><hr>
<div id="hasil"><img src="no-image.jpg" width="50" height="20">
<!-- gambar akan muncul disini !-->
</div>
<form id="form" action="ajaxupload.php" method="post" enctype="multipart/form-data">
<input id="uploadImage" type="file" accept="image/*" name="gambar">
<input id="button" type="submit" value="Upload">
</form>
<div id="pesan-error">
<!-- jika gambar tidak valid maka akan muncul pesan disini !-->
</div>
</div>
</body>
</html>
Saya tak akan menjelaskan lagi cara kerja script diatas, karena saya anggap disini teman-teman sudah pernah belajar html.
Setelah itu kita buat script ajax nya, copy script dibawah ini dan berinama script.js
$(document).ready(function (e) {
$("#form").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "ajaxupload.php", // proses upload gambar
type: "POST", // metode untuk menjalankan form
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
beforeSend : function(){
$("#pesan-error").fadeOut();
},
success: function(data){
if(data=='invalid file'){
// invalid file format.
$("#pesan-error").html("Format gambar tidak valid").fadeIn();
}else{
// hasil upload gambar
$("#hasil").html(data).fadeIn();
$("#form")[0].reset();
}
},
error: function(e)
{
$("#pesan-error").html(e).fadeIn();
}
});
}));
});
Oke, sekarang mari kita lanjut lagi, setelah itu mari kita buat script untuk pemorosesan upload gambarnya, copy script dibawah ini lalu save dengan nama uploadajax.php
<?php
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif', 'bmp'); // gambar harus jpeg, jpg, png, gif, bmp
$path = 'image/'; // tempat gambar di upload
if(isset($_FILES['gambar'])){
$img = $_FILES['gambar']['name'];
$tmp = $_FILES['gambar']['tmp_name'];
$ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));
// mengupload gambar dengan menggunakan angka random, untuk mencegah nama kembar
$final_image = rand(1000,1000000).$img;
// Check format validasi
if(in_array($ext, $valid_extensions)){
$path = $path.strtolower($final_image);
// $tmp = tempat asal gambar
// $path = tempat gambar di upload
// Jika berhasil di upload maka akan di lanjutkan dengan menampilkan gambar hasil upload
if(move_uploaded_file($tmp,$path)) {
echo "<img src='$path' />";
}
}else{ // jika tidak berhasil maka akan
echo 'Format gambar tidak valid / gambar tidak valid';
}
}
?>
Semua penjelasan sudah saya berikan pada masing-masing script di atas, jadi saya tidak perlu menjelaskannya lagi, dan silahkan kalian cari mengerti sendiri, dan pahami.
Oh iya, saya hampir lupa, kita harus juga menyediakan folder untuk menyimpan atau tempat gambar di upload.Nah, pada tutorial ini saya berinama folder tersebut adalah image.Atau silahkan dilihat susunan folder di bawah ini.
 |
| susunan folder |
Lalu, silahkan di lihat hasilnya atau dijalankan pada komputer teman-teman.Sampai disini dulu tutorial kali ini, nanti kita akan bertemu di lain waktu.
Semoga Bermanfaat ! Salam Programer U-Mild
