Technology

Cara Membuat File Uploader + Progress Bar di HTML5

 

Loading...

Nah programmer, jika website anda mengijinkan proses upload, maka kali ini saya ingin share tentang bagaimana cara membuat uploader file buatan sendiri yang lebih menarik bagi website anda. Yaitu dengan ditambahkannya Progress Bar pada uploader tersebut. Tujuannya tentu agar user dapat mengetahui berapa persen progress upload yang telah dia lakukan secara visual.

Berikut ini kode HTML yang akan kita gunakan:

[code lang=”html”]
<!doctype html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>HTML5: File Upload</title>
</head>
<body>
<form action="upload.php" method="post" id="fileUpload">
<input type="file" name="upload">
<button type="submit">Upload</button>
</form>
<div class="progress">
<progress min="0" max="100" value="0" id="progressBar"></progress>
<div id="progressText"></div>
</div>
</body>
<script src="scripts.js"></script>
</html>
[/code]

Langkah selanjutnya adalah membuatnya berjalan. Buat file scripts.js lalu tambahkan kode di bawah ini.

[code lang=”js”]
/* First Initialization */
var uploaderForm = document.querySelector(‘#fileUpload’),
progressBar = document.querySelector(‘#progressBar’),
progressText = document.querySelector(‘#progressText’),
xhr;
[/code]

Kode diatas berfungsi untuk inisialisasi awal, dimana variabel uploadForm adalah form yang akan dipakai sebagai form upload,  progressBar digunakan untuk indikator progress upload, dan progressText untuk indikator progress upload namun berupa text. Next, tambahkan kode berikut ini pada file yang sama, scripts.js

[code lang=”js”] progressBar.style.display = ‘none’; [/code]

Kita pastikan dulu progressBar tidak tampil saat pertama kali kita membuka file html tadi. Then, kita tambahkan script dibawah ini sebagai main execution. Script ini lah yang akan membuat semua berjalan.

[code lang=”html”]
/* Fungsi submit form. Disinilah upload file akan kita lakukan dengan mode AJAX */
uploaderForm.addEventListener(‘submit’,function(e){
e.preventDefault();

var data=new FormData(),
form=this,
fileSource=this.querySelector(‘[type="file"]’),
file=fileSource.files[0];

data.append(‘upload’,file);

/* */
xhr = new XMLHttpRequest();

/* Fungsi handler ketika upload sudah selesai */
xhr.upload.onload=function(){
progressBar.value = 0;
progressText.innerHTML = ”;
progressBar.style.display = ‘none’;
form.reset();
}

/* Fungsi handler ketika upload akan dimulai */
xhr.upload.onloadstart=function(){
progressBar.style.display = ‘block’;
}

/* Fungsi handler ketika upload dalam progress */
xhr.upload.onprogress=function(e){
console.log(e);
if (e.lengthComputable) {
var percentComplete = Math.round(e.loaded / e.total* 100);
progressBar.value = percentComplete;
progressText.innerHTML = "Total Uploaded: "+percentComplete+’%’;
} else {

}
}

/* */
xhr.open(‘POST’,this.action);

xhr.onreadystatechange=function(){
if(xhr.readyState == 4 && xhr.status == 200)
{
var response = JSON.parse(xhr.responseText);
progressText.innerHTML = ‘Uploaded file : ‘+response.upload.name;
}
}

/* Mengirim data pada upload file*/
xhr.send(data);
return false;
},false);

[/code]

Last step, buat file upload.php sebagai penerima upload. Berikut script upload.php yang akan kita gunakan.

[code lang=”php”]
<?php
return print json_encode($_FILES);
[/code]

Okey, we’re done. Untuk demo bisa dilihat disini. Jangan lupa satu hal. Yakni Gunakan Modern Browser. Minimal:

  • Internet Explorer 10
  • Mozilla Firefox 4.0 Beta 6
  • Chrome 6
  • Safari 5.02

Karena teknologi yang kita gunakan (HTML5) adalah modern, maka browser yang akan bertugas sebagai viewer juga harus modern.

Loading...

9 komentar

  • Adit
    6 September 2013 - pukul 17:05

    Ntar file yang udh slse di upload larinya kemana bang?

    • 9 September 2013 - pukul 21:33

      Pada demo diatas emang sengaja tidak ada lokasi file yang telah upload akan di simpan, tapi mas Adit bisa improve hal tersebut melalui proses backend, yaitu upload.php. Itu kan sudah ada variable $_FILES yang bisa di manfaatkan dalam penyimpanan file yang diupload. Kiranya seperti itu mas.

  • ojan
    14 Oktober 2013 - pukul 13:21

    mas, sy masih baru belajar dan bingung dengan fungsi json_encode.. cari2 di google jg masih bingung penerapannya..

    jd sy coba aja sisipkan perintah move_upload_file() di file upload.php

    tp setelah di coba masih blm tau filenya lari kemana :D

    boleh di jabarin lagi mas perintah uploadnya pada file upload.php

    tks..

  • 14 Oktober 2013 - pukul 20:51

    Fungsi json_encode diatas hanya untuk mengubah data object atau array menjadi JSON string. Kalau file upload ingin disimpan, mungkin bisa disisipkan script move_uploaded_file(); sebelum json_encode();

    contoh : move_uploaded_file($_FILES[‘upload’][‘tmp’], ‘lokasi-file.jpg’);

    • ojan
      16 Oktober 2013 - pukul 9:15

      Terima kasih mas balasannya, filenya udah bisa ke upload.. yang lalu sy salah penamaan variabel $_FILES.

  • 21 Oktober 2013 - pukul 22:10

    Sangat Bermanfaat. Terima Kasih Banyak.

  • sandi
    10 Maret 2014 - pukul 13:27

    klo inputan lebih dari satu gimana caranya ya?
    contoh :

  • sandi
    10 Maret 2014 - pukul 14:06

    gimana caranya memparsing lebih dari satu inputan?

Berikan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *