Progres Bar Upload Image Dengan HTML5, PHP Dan Ajax
Ilustrasi gambar dari www.citrik.com
Konsep dari cript ini ialah dengan menghitung besar file yang akan diupload, lalu hasil ukuran file tersebut dimasukan ke dalam progres bar,
Ok, Selanjutnya kita buat form uploadnya terlebih dahulu.
<!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>
Pada script diatas terdapat komponen tag sebagai berikut
<progress id="progressBar" value="0" max="100"></progress>
Komponen tersebut ialah kompunen tag yang akan dikenal oleh HTML5.
Adapun komponen <h3 id="status"></h3> nantinya akan digunakan untuk menampilkan status upload file 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()‘ function ini ialah terletak pada file upload.php sebagaimana tersaji dalam script di atas untuk proses upload file yang diarahkan ke file upload.php namun dijalankan via AJAX.
Selanjutnya kita buat file upload.php nya, yaitu script yang akan mengirim file ke folder penyimpanan.
<?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";
}
?>
Sekian Postingan pada kali ini, semoga bisa bermanfaat, terima kasih telah berkunjung.
Sumber referensi dari = blog.rosihanari.php
Posting Komentar untuk "Progres Bar Upload Image Dengan HTML5, PHP Dan Ajax"