Membuat Progress Bar Upload File Dengan PHP, AJAX dan HTML5

Membuat Progress Bar Upload File Dengan PHP, AJAX dan HTML5 - Pada kesempatan kali ini, kita akan membahas bagaimana cara membuat script PHP untuk upload file dengan progress bar. Adapun konsep dari program ini adalah sama seperti script upload file yang pada umumnya namun dilengkapi dengan sebuah progress bar yang menggunakan script HTML5 dan Javascript. Progress bar merupakan tampilan secara grafis yang menunjukkan sudah berapa persen file tersebut diupload ke server. Untuk lebih jelasnya dapat anda lihat pada gambar

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.

Form Upload :

index.html

<!DOCTYPE html>
<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>

Dalam form HTML di atas, terdapat komponen dengan tag sbb:

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

Upload.php :

<?php
// 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";
}
?>

Dalam 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.

DOWNLOAD

AkbarNSS

Pages

Membuat Progress Bar Upload File Dengan PHP, AJAX dan HTML5