Tutorial kita kali ini membahas tentang upload gambar dengan menggunakan PHP dan JQuery. JQuery akan digunakan di client side, dimana kita akan membuat proses upload secara asynchronous (tanpa mereload halaman) dan PHP di server side untuk memproses file yang kita upload tersebut.
Persiapan
Pertama kita akan membuat sebuah folder dengan nama ajax-upload di local server kamu. Jika kamu menggunakan XAMPP atau MAMP kamu bisa buat di dalam folder htdocs. Adapun susunan directory dan file dalam tutorial kita kali ini adalah:
ajax-upload/
- uploads/ -> folder tempat upload gambar
- index.php -> halaman utama dari tutorial ajax upload
- main.js -> javascript coding
- upload.php -> menghadle proses upload
Daftar Isi
Jika kalian sudah membuat directory dan file seperti di atas. Kita lanjut ke step selanjutnya.
index.php
index.php adalah file yang berfungsi sebagai halaman utama dari sistem yang kita buat. Ayuk kita mulai ngoding.
<!DOCTYPE html>
<html>
<head>
<title>Ajax Image Upload</title>
<style type="text/css">
.container{
background: #f9f9f9;
width: 50%;
margin: auto;
padding: 15px;
text-align: center;
}
.loading {
font-style: italic;
color: red;
}
.image-place img {
margin: 1px;
}
</style>
</head>
<body>
<div class="container">
<h1>Ajax Image Upload</h1>
<div class="upload-place">
<div id="preview">
</div>
<form id="image-upload" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="image" id="image" required />
</form>
<p class="loading"></p>
</div>
<hr>
<div id="image-place">
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Sedikit penjelasan tentang isi dari file index.php di atas bisa kita bagi menjadi beberapa part utama yaitu:
- Div dengan id preview : berfungsi untuk preview sementara file yang akan kita upload
- Sebuah form denga input type file
- Sebuah tag paragraph dengan class loading yang berfungsi untuk menampilkan status dari proses upload tersebut dan pesan saat upload sudah berhasil atau tidak.
- Div dengan id image-place, yang berfungsi sebagai tempat untuk menampilkan file-file yang sudah ada di dalam folder uploads.
Menampilkan gambar gambar yang sudah ada di folder uploads
Untuk menampilkan gambar dalam folder upload kita akan menggunakan fungsi scandir dan melakukan perulangan untuk setiap gambar untuk ditampilkan dalam div image-place. Ayuk kita tambahan script di bawah ini di bagian paling atas dari file index.php
<?php
$dir = 'uploads/';
$files = scandir($dir);
?>
Kemudian, di dalam div image-place kita akan tambahkan script di bawah ini untuk menampilkan gambar yang ada dalam folder uploads.
//tambahkan di dalam div image-place
<?php
foreach ($files as $key => $img) {
if($img != '..' && $img != '.' )
echo '<img src="'.$dir.$img.'" height="100"/>';
}
?>
Sekarang coba kita buka file index.php yang sudah di buat di browser kamu, misalnya dengan membuka http://localhost/ajax-upload Kamu akan melihat tampilan seperti di bawah ini:
upload.php
upload.php berfungsi untuk memproses gambar yang sudah kita upload tadi sehingga tersimpan ke dalam folder uploads.
<?php
header('Content-Type: application/json');
if(isset($_FILES['image']['type'])){
$validextensions = array('jpeg', 'jpg', 'png');
$temporary = explode('.', $_FILES['image']['name']);
$file_extension = end($temporary);
if (
(($_FILES['image']['type'] == 'image/png') ||
($_FILES['image']['type'] == 'image/jpg') ||
($_FILES['image']['type'] == 'image/jpeg'))
&&
($_FILES['image']['size'] < 100000)//Approx. 100kb files can be up.
&&
in_array($file_extension, $validextensions)){
if ($_FILES['image']['error'] > 0){
$data = array(
'error' => $_FILES['image']['error']
);
echo json_encode($data);
}else{
if (file_exists('uploads/' . $_FILES['image']['name'])) {
$data = array(
'error' => $_FILES['image']['name'] . ' already exists'
);
echo json_encode($data);
}else{
$filename = $_FILES['image']['name'];
$sourcePath = $_FILES['image']['tmp_name']; // Storing source path of the file in a variable
$targetPath = 'uploads/'.$filename; // Target path where file is to be stored
move_up_file($sourcePath,$targetPath) ; // Moving Up file
$data = array(
'message' => 'Image Up Successfully',
'image' => $targetPath
);
echo json_encode($data);
}
}
}else{
$data = array(
'error' => 'Invalid file Size or Type',
);
echo json_encode($data);
}
}
?>
Return dari file upload.php kita akan buat dalam format json supaya lebih gampang untuk di proses nanti dalam file main.js
main.js
Sekarang saatnya kita ngoding javascript agar saat user memilih file lewat form yang sudah kita buat, maka sistem akan otomatis mengupload gambar tersebut dan jika proses upload berhasil maka gambar yang dari di upload akan secara otomatis bertambah di div image-place tersebut. Lets code!
$(document).ready(function(){
var input = $('#image');
var form = $('#image-upload');
$(input).change(function(){
var file = this.files[0];
var imagefile = file.type;
var match= ["image/jpeg","image/png","image/jpg"];
if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
{
//wrong image format
alert('Format gambar salah.');
}else{
function previewFile(file, onLoadCallback){
var reader = new FileReader();
reader.onload = onLoadCallback;
reader.readAsDataURL(file);
}
previewFile(this.files[0], function(e) {
$('#preview').html('');
// create image preview
var img = $('<img height="100">');
img.attr('src', e.target.result);
img.appendTo('#preview');
});
$(form).submit();
}
});
// event listener untuk form saat di submit
$(form).submit(function(event) {
// mencegah browser mensubmit form.
event.preventDefault();
// tampilkan pesan sedang upload
$('.loading').html('Uploading..');
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
}).success(function(data){
//div preview kita kosongkan lagi
$('#preview').html('');
$(form).trigger('reset');
//mulai memproses respon dari upload.php
if(data.error){
$('.loading').html(data.error)
}else{
$('.loading').html(data.message)
var img = $('<img height="100">');
img.attr('src', data.image);
img.appendTo('#image-place');
}
}).error(function(){
alert('Something wrong..')
});
});
});
Kita hampir selesai dengan tutorial kali ini. Mungkin ada sedikit penjelasan lebih detail di bagian ajax saat form tersebut di submit.
- set
contentType:false, kenapa? Supaya JQuery tidak menambahkan header Content-type saat request berlangung sehingga boundary string tidak hilang - set
processData : falseJika tidak di set false maka formData kamu akan menjadi string yang menyebapkan upload file menjadi gagal.
Kita hampir selesai dengan tutorial upload gambar dengan PHP dan JQuery, sekarang saatnya kita mencobanya di browser kesukaan kalian masing-masing. File yang kamu pilih akan secara otomatis ter-upload dan terlist di sebelah bawah.
Silakan kalian coba dan jika ada pertanyaan bisa isi kolom komentar di bawah. Happy coding!
