Cara Membuat Upload File Dengan Progressbar Menggunakan Ajax pada PHP

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>

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

 

2. Kemudian masih di file index.php pada tag <body> paling bawah buat tag <script> untuk memasukkan kode javascript dan ajax seperti dibawah

 

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

 

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 :

Sampai jumpa pada postingan saya selanjutnya..

4 thoughts on “Cara Membuat Upload File Dengan Progressbar Menggunakan Ajax pada PHP

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

Leave a Reply

Your email address will not be published. Required fields are marked *

nineteen − three =