Cara Membuat Upload File Dengan Progressbar Menggunakan Ajax pada PHP – Setelah sebelumnya saya sudah memposting tentnag cara mengupload gambar/file menggunakan Ajax dan saya juga sudah membahas tentang progressbar. Sekarang saya ingin memposting tentang gabungan dari dua itu yaitu cara menambahkan progressbar pada saat upload file. Jadi jika kita mengupload file yang mempunyai file size yang besar maka kita bisa tahu sudah berapa persen file yang kita upload itu.
Baca juga :
Cara membuat Crop and Upload Menggunakan Ajax pada PHP
Cara Mengupload dengan Hapus Gambar menggunakan Ajax dan PHP
Cara Upload Gambar dari URL Menggunakan Ajax dan PHP
Cara Mengupload File dengan Ajax Tanpa Loading pada PHP
Cara Membuat Upload File Dengan Progressbar Menggunakan Ajax pada PHP
CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP
Membuat Upload dan Resize/Compress Gambar denga Ajax pada PHP
Cara Membuat Upload dan Ekstrak Zip pada PHP
Cara Membuat Upload Multiple Image dengan Ajax dan Bootstrap Modal
Namun sebelumnya kita membutuhkan librari jquery dan untuk mempercantik tampilan saya menggunakan bootstrap4. Kita tambahkan kode dibawah ini pada tag <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Karena untuk keperluan demo jadi saya mencontohkan menggunakan librari online, namun jika sobat ingin menggunakan untuk keperluan development tentunya sobat harus mendownloadnya terlebih dahulu atau sobat bisa mendownloadnya bersama dengan project ini diakhir postingan.
Cara Menambahkan Progressbar pada File upload
Berikut adalah cara membuat file upload dengan progress bar pada PHP :
1. Buat file index.php dan buat form upload beserta progressbarnya seperti dibawah
<form id="upload_form"> <div class="form-group mb-5"> <label>Pilih File</label><br/> <input type="file" name="file" id="file" class="form-control"> </div> <div class="form-group mb-5"> <input type="button" id="upload" value="Upload File" class="btn btn-success"> </div> <progress id="progressBar" value="0" max="100" style="width:100%; display: none;"></progress> <h3 id="status"></h3> <p id="loaded_n_total"></p> </form>
2. Kemudian masih di file index.php pada tag <body> paling bawah buat tag <script> untuk memasukkan kode javascript dan ajax seperti dibawah
<script>
function ambilId(file){
return document.getElementById(file);
}
$(document).ready(function(){
$("#upload").click(function(){
ambilId("progressBar").style.display = "block";
var file = ambilId("file").files[0];
if (file!="") {
var formdata = new FormData();
formdata.append("file", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "upload.php");
ajax.send(formdata);
}
});
});
function progressHandler(event){
ambilId("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
var percent = (event.loaded / event.total) * 100;
ambilId("progressBar").value = Math.round(percent);
ambilId("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
ambilId("status").innerHTML = event.target.responseText;
ambilId("progressBar").value = 0;
}
function errorHandler(event){
ambilId("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
ambilId("status").innerHTML = "Upload Aborted";
}
</script>
3. Kemudian buat file upload.php yang berfungsi untuk menuliskan kode yang berfungsi untuk menyimpan gambar/file ke local directory kita. Sobat juga bisa menambahkan kode untuk menyimpan databasenya disini
<?php
$fileName = $_FILES["file"]["name"]; // Nama File
$fileTmp = $_FILES["file"]["tmp_name"]; // File di PHP tmp folder
// Jika belum ada folder upload maka buat folder upload
$temp = "upload/";
if (!file_exists($temp))
mkdir($temp);
if(move_uploaded_file($fileTmp, $temp . "$fileName")){
echo "$fileName sukses diupload";
} else {
echo "Upload gagal";
}
?>
4. Kemudian jalankan project sobat, jika berhasil saat upload file dengan ukuran besar yang membutuhkan waktu lama pasti akan muncul progress bar. Tampilannya kurang lebih seperti dibawah :
Namun jika sobat mencoba upload di localhost dengan file yang kecil pasti tidak terlihat karena hanya dalam hitungan milisecond namun jika di server pasti upload akan lebih lama dan sobat perlu menambahkan maksimal upload pada apachenya agar bisa menambahkan file dengan ukuran yang besar tentunya.
Sekian postingan saya tentang Cara Membuat Upload File Dengan Progressbar Menggunakan Ajax pada PHP. Mohon maaf pada postingan kali ini saya tidak menambahkan untuk menyimpan ke dalam databasenya. Sobat harus lihat pada postingan saya tentang menambahkan gambar ke dalam database karena caranya sama, sobat hanya perlu mengubah pada file upload.php saja. Jika ada kesalahan saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah.
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :
saya ingin membuat progress bar untuk proses data yang lama. Bagaimana cara saya membuatnya ?
mungkin tiap orang beda-beda caranya , tapi kalo saya dibikin seperti pagination,
– pertama bikin ajax buat count jumlahnya
– setelah itu dibagi(ingin berapa per page terserah)
– looping ajax sesuai jumlahnya dan simpan hasil response data ajax dan gabungkan/append response data setiap berhasil di looping dan juga update angka progressbarnya
– di querynya seperti pagination menggunakan atau … LIMIT 0, 10 atau … LIMIT 11, 10
misalkan
– pertama count dapat 1000 data
– misalkan ingin di limit 100 berarti bagi 100 menjadi 10 page/looping ajax 10 kali
– tiap berhasil append datanya dan update progressbarnya jadi karena ada 10 page jadi setiap berhasil mendapatkan data nambah 10%
mungkin kira2 kaya gitu yang penting pahami aja dulu untuk kodingnya saya ngga bisa jelaskan disini karena sangat panjang sekali