Pada gambar diatas, tampak bahwa ketika selama proses uploading file, progress bar (warna hijau) akan bergerak dan menampilkan ukuran file yang telah terupload hingga file sempurna terupload. Sistem hampir mirip dengan sistem yang diterapkan oleh situs sharing video, misalnya Youtube ketika usernya akan mengupload video. Penasaran bagaimana cara membuat script php seperti gambar diatas ? Berikut adalah penjelasannya.
Ide pembuatan script ini sebenarnya sederhana yakni ketika proses uploading file, besar data dari file yang telah terupload ini akan dihitung berdasarkan prosentase menggunakan formula matematika. Nah, ukuran prosentase inilah yang nanti akan membuat progress bar berjalan hingga 100% atau file terupload secara sempurna. Selanjutnya nilai prosentase ini ditampilkan ke dalam bentuk progress bar menggunakan komponen yang ada di HTML5. Untuk pembuatan script upload file + progress bar ini kita menggabungkan HTML5, PHP dan AJAX.
Baik, sekarang kita buat form upload nya sbb :
<!DOCTYPE html>Dalam form HTML di atas, terdapat komponen dengan tag sbb:
<html>
<head>
<script>
function uploadFile() {
// membaca data file yg akan diupload, dari komponen 'fileku'
var file = document.getElementById("fileku").files[0];
var formdata = new FormData();
formdata.append("datafile", file);
// proses upload via AJAX disubmit ke 'upload.php'
// selama proses upload, akan menjalankan progressHandler()
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.open("POST", "upload.php", true);
ajax.send(formdata);
}
function progressHandler(event){
// hitung prosentase
var percent = (event.loaded / event.total) * 100;
// menampilkan prosentase ke komponen id 'progressBar'
document.getElementById("progressBar").value = Math.round(percent);
// menampilkan prosentase ke komponen id 'status'
document.getElementById("status").innerHTML = Math.round(percent)+"% telah terupload";
// menampilkan file size yg tlh terupload dan totalnya ke komponen id 'total'
document.getElementById("total").innerHTML = "Telah terupload "+event.loaded+" bytes dari "+event.total;
}
</script>
</head>
<body>
<h2> HTML5 Upload File</h2>
<form id="upload_form" enctype="multipart/form-data">
<input type="file" name="datafile" id="fileku"><br>
<input type="button" value="Upload File" onclick="uploadFile()">
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<h3 id="status"></h3>
<p id="total"></p>
</form>
</body>
</html>
<progress id="progressBar" value="0" max="100"></progress>
Komponen tersebut merupakan komponen progress bar yang dikenal di HTML5.
Adapun komponen <h3 id="status"></h3> nantinya akan digunakan untuk menampilkan status upload yang berupa prosentase dalam angka besarnya file size yang telah terupload. Sedangkan komponen >p id="total"<>/p< nantinya digunakan untuk menampilkan filesize yang sudah terupload dari total filesizenya.
Apabila tombol upload diclick, maka akan menjalankan function ‘uploadFile()‘ sebagaimana tersaji dalam script di atas untuk proses upload file yang diarahkan ke file upload.php namun dijalankan via AJAX.
Selanjutnya, kita buat script upload.php nya
<?phpDalam contoh script upload di atas, diasumsikan file akan diupload ke dalam folder /upload jadi pastikan sebelum Anda mencoba scriptnya, sudah dibuat folder ‘upload’ terlebih dahulu. Folder ini jadi satu dalam direktori yang sama dengan script di atas.
// baca nama file
$fileName = $_FILES["datafile"]["name"];
// baca file temporary upload
$fileTemp = $_FILES["datafile"]["tmp_name"];
// baca tipe file
$fileType = $_FILES["datafile"]["type"];
// baca filesize
$fileSize = $_FILES["datafile"]["size"];
// proses upload file ke folder /upload
if (move_uploaded_file($fileTemp, 'upload/'.$fileName)){
echo "Upload $fileName selesai";
}
?>
Mudah bukan membuatnya? selamat mencoba :-)
Sumber :
Blog Rosihanari
0 Response to "Membuat Progress Bar Upload File Dengan PHP, Ajax, dan HTML"
Posting Komentar