How to Make File Upload With Progress Bar

PHP memberikan kemudahan bagi pengguna untuk mengirimkan data text dan juga information biner dalam bentuk upload file. Dan ini artinya hampir semua data baik berupa dokumen text, audio, video bahkan file exe dapat dikirimkan melalui script PHP.

Upload file biasanya menggunakan informasi status file yang sedang dikirimkan menuju ke server. Informasi proses upload file pada setiap website disajikan dalam bentuk tampilan yang berbeda-beda. Ada yang menggunakan progress bar yang berjalan, status bar berupa persentase progress ataupun yang hanya menyajikan dalam bentuk animasi gif berupa loader yang bergerak berputar-putar. Semua hal tersebut digunakan untuk memberitahukan pengguna bahwa proses upload sedang berjalan.

Pada artikel kali ini, Saya akan menjelaskan bagaimana cara mengupload file dengan disertai progress bar dan juga status bar.

Membuat Halaman Index

Halaman alphabetize digunakan sebagai halaman bagi pengguna untuk memasukkan file yang akan dikirimkan. Pada halaman index, terdapat elemen HTML berupa input type file, dan juga tombol Upload File. Elemen HTML berupa <progress> dan juga elemen paragraf <p> untuk condition bar juga ikut disertakan sebagai tampilan proses upload yang sedang berjalan. Namun kedua elemen tersebut perlu disembunyikan terlebih dahulu saat pertama kali halaman dimuat dan akan ditampilkan saat proses uploading sudah dimulai.

Berikut halaman index.php :

Kode Script :

            i.  <!DOCTYPE html>
            2.  <html>
            three.  <head>
            iv.  <meta name="viewport" content="width=device-width, initial-calibration=one">
            5.  <meta charset="utf-8">
            6.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
            7.  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
            8.  <manner>
            9.  body{
            x.    padding:10px;
            xi. }
            12. .upload_container{
            13.    border :1px solid #aaa;
            14.    background : #ddd;
            fifteen.    padding:10px;
            xvi. }
            17. .form_upload div{
            xviii.    margin: 7px;
            19. }
            20. .progress_container{
            21.    display: none;
            22. }
            23. .message_info p{
            24.    margin-top: 10px;
            25.    color:navy;
            26. }
            27. .message_info img{
            28.    height:220px;
            29.    width:auto;
            30.    margin:10px;
            31. }
            32. </manner>
            33.
            34. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
            35. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.one/jquery.min.js"></script>
            36. <title>Upload File With Progressbar And Status Bar</title>
            37. </head>
            38. <torso>
            39. <h2>Upload File With Progressbar And Condition Bar</h2>
            40. <div course="upload_container">
            41.    <form form="form_upload">
            42.      <div>Delight select a file :</div>
            43.      <div>
            44.      <p><input type="file" id="the_file"></p>
            45.      <button type="push" id="upload" class="btn btn-success">Upload File <bridge class='glyphicon glyphicon-arrow-up'></bridge></button>
            46.      </div>
            47.      <div id="progress_container" class="progress_container">
            48.      <progress id="progressBar" value="0" max="100" style="width:100%;"></progress>
            49.      <p id="status_bar"></p>
            50.      <push button id="btn_abort" course="btn btn-alarm" >Arrest</push>
            51.      </div>
            52.      <div id="message_info" course="message_info"></div>
            53.    </form>
            54. </div>
            55. </torso>
            56. </html>
            57. <script>
            58.    $(document).set up(function(){
            59.      $("#upload").click(function(){
            60.      var the_file = $('#the_file').val();
            61.      if(the_file ==""){
            62.          alert('Please select the file');
            63.         return false;
            64.      }else{
            65.         $('#progress_container').css("brandish","block");
            66.         var file = document.getElementById('the_file').files[0];
            67.            
            68.         if (file!="") {
            69.            var formdata = new FormData();
            70.            formdata.append("upload_file", file);
            71.            var ajax = new XMLHttpRequest();
            72.            ajax.upload.addEventListener("progress", progressHandler, simulated);
            73.            ajax.addEventListener("load", completeHandler, false);
            74.            ajax.addEventListener("error", errorHandler, simulated);
            75.            ajax.addEventListener("abort", abortHandler, fake);
            76.            ajax.open("POST", "upload.php");
            77.            ajax.send(formdata);
            78.         }
            79.      }
            80.      });
            81.
            82.      $('#btn_abort').click(role(){
            83.          abortHandler();
            84.      });
            85.    });
            86.    office bytesToSize(bytes) {
            87.      var sizes = ['Bytes', 'Kb', 'Mb', 'Gb', 'Tb'];
            88.      if (bytes == 0) return '0 Byte';
            89.      var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
            90.      render Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
            91.    }
            92.    function progressHandler(event){
            93.      var percent = (result.loaded / event.total) * 100;
            94.      $('#progressBar').val(Math.round(percent));
            95.      $('#status_bar').html("Uploaded " + bytesToSize(event.loaded) + " bytes of " + bytesToSize(consequence.total));
            96.      $('#message_info').html(Math.round(percent)+"% uploaded... please wait");
            97.    }
            98.    function completeHandler(consequence){
            99.      $('#message_info').html(event.target.responseText);
            100.      $('#progress_container').css("display","none");
            101.
            102.    }
            103.    part errorHandler(event){
            104.      $('#message_info').html("Upload Failed");
            105.    }
            106.    function abortHandler(event){
            107.      $('#message_info').html("Upload Aborted");
            108.    }
            109. </script>
            110.

Penjelasan :
Elemen tag HTML <grade> digunakan sebagai formulir bagi tiap komponen input data yang dikirimkan. Course tersebut tidak perlu menggunakan atribut method maupun atribut action, karena proses pengiriman data menuju server akan langsung ditangani oleh Jquery dengan melalui ajax.

Elemen tag <input> blazon file digunakan untuk memasukan file yang akan dikirim. Kemudian elemen tag <div> dengan id "progress_container" perlu dibuat namun tampilannya dalam posisi tidak ditampilkan (display:none). Elemen tersebut digunakan sebagai container bagi progress bar dan juga status bar. (baris ke-41 s.d 53)

Pada bagian Jquery, proses pengiriman dengan menggunakan formdata. Dimana formdata sebagai wadah bagi input file dengan id "the_file". Information file yang dikirimkan diberi nama upload_file dengan isi file nilai dari input file dengan id the_file. Method yang digunakan adalah post dengan halaman yang dituju upload.php

Pada proses uploading file, akan meminta request jumlah byte file yang sedang dikirimkan melalui addEventListener berupa progress. Eventlistener berupa progress akan mengeksekusi fungsi progressHandler(). Fungsi ini digunakan untuk mendapatkan persentase data yang sudah dikirimkan dari total byte yang akan dikirimkan. Kemudian persentase ini digunakan untuk mengisi nilai dari progressbar. (baris ke-57 south.d 109)

Membuat Halaman Upload File

Halaman upload file digunakan sebagai halaman untuk melakukan proses uploading data. Halaman ini akan mengirimkan data file yang diinputkan pengguna dan menyimpannya pada server.

Berikut halaman upload.php :

Kode Script :

            1.  <?php
            ii.     $dir = "uploads/";
            3.     if(!is_dir($dir)){
            4.       mkdir($dir);
            5.     }
            6.     $motion = move_uploaded_file($_FILES['upload_file']['tmp_name'], $dir.$_FILES['upload_file']['proper noun']);
            7.     if($movement){
            eight.       $fileTypes = array('jpg', 'jpeg', 'gif', 'png');
            nine.       $fileParts = pathinfo($_FILES['upload_file']['proper noun']);
            10.      echo '<p>File take uploaded successfully..</p>';
            eleven.      if (in_array(strtolower($fileParts['extension']), $fileTypes)) {
            12.         echo '<img src="' . $dir . $_FILES["upload_file"]["proper noun"].'">';
            13.      }
            14.    }else{
            15.      echo "<p>Uploading file failed</p>";
            xvi.    }
            17. ?>

Penjelasan : Direktori tujuan dari file yang akan dikirimkan adalah uploads/. Jika direktori tersebut tidak ada atau belum dibuat, maka fungsi php mkdir() akan membuat direktori upload secara langsung.

Kemudian file akan disimpan dengan menggunakan move_uploaded_file. Sebagai nilai callback fungsi ajax pada halaman alphabetize.php maka perlu diberikan parameter keberhasilan pengiriman. Jika file berhasil disimpan maka akan mengirimkan nilai "File accept uploaded successfully". Jika file tersebut merupakan file epitome / gambar, maka nilai callback-nya berupa tag <img> lengkap dengan alamat url pada server. Hal ini dimaksudkan sebagai preview gambar untuk pengguna.

Hasil Output

Saat halaman index pertama kali dimuat akan menampilkan tampilan sebagai berikut :

Progressbar akan muncul saat proses uploading sedang berjalan :

Saat file berhasil dikirimkan akan menghasilkan tampilan :

Tampilan pada File Explorer :

Berikut video lengkap proses uploading file dilengkapi dengan progressbar dan juga status bar :

Demikian tutorial bagaimana cara membuat upload file dengan progressbar dan juga status bar, semoga bermanfaat . Silahkan anda berkomentar pada kolom komentar yang sudah disediakan.

24 Jul 20210661