Upload File dengan Progress Bar menggunakan jQuery AJAX di PHP

3
Upload File dengan Progress Bar menggunakan jQuery AJAX di PHP

Fitur upload file adalah fungsi yang paling banyak digunakan untuk website-website dinamis. Fungsionalitas upload file dapat dengan mudah diimplementasikan menggunakan PHP. Secara umum, halaman di-refresh ketika kamu mengupload file menggunakan PHP. Untuk membuat upload file ini menjadi mudah digunakan, jQuery dan AJAX dapat digunakan untuk mengupload file/gambar tanpa me-refresh halaman.

Saat file diupload ke server, halaman web tetap pada status pemuatan. Sangat sulit bagi pengguna untuk melacak kemajuan unggahan. Progress Bar sangat berguna untuk mengatasi masalah ini dengan menunjukkan proses upload dalam format yang dapat dibaca manusia. Progress Bar adalah elemen grafis yang memvisualisasikan perkembangan operasi. Secara umum, Progress Bar digunakan untuk menampilkan representasi kemajuan dalam format persentase untuk mengupload, mendownload, installasi, dll.

Dalam tutorial ini, saya akan mengimplementasikan fungsionalitas berikut:

  • Form HTML untuk memilih file.
  • Menampilkan progess bar saat proses upload sedang berlangsung menggunakan jQuery.
  • Menambahkan persentase penyelesaian upload ke progess bar secara real-time menggunakan AJAX.
  • Upload file ke server menggunakan PHP.

Form Upload File dengan Progress Bar

File index.html menangani pemilihan file dan menampilkan progress proses upload.

Form Upload File

1. Membuat form HTML dengan bidang input file dan tombol kirim.

  • Tag <form> harus ada atribut enctype="multipart/form-data".
  • Tag <input> harus ada atribut type="file".
<!-- Form upload file -->
<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="file" id="fileInput">
  <input type="submit" name="submit" value="UPLOAD"/>
</form>

2. Elemen HTML untuk menampilkan progress bar.

<!-- Progress bar -->
<div class="progress">
  <div class="progress-bar"></div>
</div>

3. Elemen HTML untuk menampilkan status upload file.

<!-- Menampilkan status upload (sukses/gagal) -->
<div id="uploadStatus"></div>

Upload File AJAX dengan Progress Bar.

JQuery dan AJAX digunakan untuk mengunggah file dengan progress bar, jadi sertakan pustaka jQuery terlebih dahulu.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Kode jQuery berikut mengirimkan data file yang dipilih ke script upload.php tanpa refresh halaman melalui AJAX.

  • Pada pengiriman form, data file yang dipilih dikirim ke script upload.php menggunakan jQuery dan Ajax.
    • Opsi xhr dari metode $.ajax() digunakan untuk melacak progress upload.
    • Metode window.XMLHttpRequest() yang membuat objek XMLHttpRequest baru.
    • Event progress upload XMLHttpRequest menunjukkan jumlah progress yang dibuat sejauh ini.
    • Persentase progress upload dilampirkan pada progress bar.
  • Objek FormData digunakan untuk mengambil data file yang dikirimkan.
    • Berdasarkan respons, status unggahan ditampilkan di halaman web.
  • Pada event change(), tipe file divalidasi berdasarkan tipe/ext yang diizinkan.
    • API File digunakan untuk mendapatkan tipe file yang dipilih.
    • Jenis MIME dari file yang dipilih akan divalidasi dan membatasi pengguna untuk hanya mengunggah gambar (.jpeg / .jpg / .png / .gif) atau PDF (.pdf) atau file MS Word (.doc / .docx).
    • Metode includes() menentukan apakah array allowedTypes berisi tipe file yang dipilih.
<script>
$(document).ready(function(){
    // upload file via AJAX
    $("#uploadForm").on('submit', function(e){
        e.preventDefault();
        $.ajax({
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = ((evt.loaded / evt.total) * 100);
                        $(".progress-bar").width(percentComplete + '%');
                        $(".progress-bar").html(percentComplete+'%');
                    }
                }, false);
                return xhr;
            },
            type: 'POST',
            url: 'upload.php',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function(){
                $(".progress-bar").width('0%');
                $('#uploadStatus').html('<img src="loading.gif"/>');
            },
            error:function(){
                $('#uploadStatus').html('<p style="color:#EA4335;">Upload file gagal, silakan coba lagi.</p>');
            },
            success: function(resp){
                if(resp == 'ok'){
                    $('#uploadForm')[0].reset();
                    $('#uploadStatus').html('<p style="color:#28A74B;">File berhasil diupload!</p>');
                }else if(resp == 'err'){
                    $('#uploadStatus').html('<p style="color:#EA4335;">Silakan pilih file yang valid untuk diupload.</p>');
                }
            }
        });
    });
 
    // memvalidasi file
    $("#fileInput").change(function(){
        var allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.ms-office', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
        var file = this.files[0];
        var fileType = file.type;
        if(!allowedTypes.includes(fileType)){
            alert('Silakan pilih file yang valid (PDF/DOC/DOCX/JPEG/JPG/PNG/GIF).');
            $("#fileInput").val('');
            return false;
        }
    });
});
</script>

Upload File ke Server menggunakan PHP

File upload.php dipanggil oleh permintaan AJAX untuk menangani proses upload file dengan PHP.

  • Mengambil informasi file dari data yang dikirimkan menggunakan metode PHP $_FILES.
  • Mengunggah file ke server menggunakan fungsi move_uploaded_file() di PHP.
  • Menghasilkan status upload file.
<?php 
$upload = 'err'; 
if(!empty($_FILES['file'])){ 
     
    // Konfigurasi upload file 
    $targetDir = "uploads/"; 
    $allowTypes = array('pdf', 'doc', 'docx', 'jpg', 'png', 'jpeg', 'gif'); 
     
    $fileName = basename($_FILES['file']['name']); 
    $targetFilePath = $targetDir.$fileName; 
     
    // memeriksa apakah tipe file valid 
    $fileType = pathinfo($targetFilePath, PATHINFO_EXTENSION); 
    if(in_array($fileType, $allowTypes)){ 
        // upload file ke server 
        if(move_uploaded_file($_FILES['file']['tmp_name'], $targetFilePath)){ 
            $upload = 'ok'; 
        } 
    } 
} 
echo $upload; 
?>

BAGIKAN
Subscribe
Beritahu
guest

3 Comments
terlama
terbaru vote teratas
Inline Feedbacks
View all comments
ewt
ewt
Juli 24, 2020 14:58

http://demo.codingan.com/live/dl-sementara ngasih link nya yg bner bos!

sulistio
sulistio
Februari 19, 2022 13:43

terus cara untuk menampilkan link file nya gimana min?? supaya bisa dishare