File Reader ~ Pemrograman dan Teknologi

Untuk mendapatkan nama file sebelum diupload, kita bisa menggunakan FileReader. FileReader membantu kita mendapatkan informasi yang dibutuhkan tentang file yang ada di komputer pengguna hanya dengan menggunakan javascript. Berikut ini adalah contoh penggunaan FileReader untuk menampilkan gambar yang akan diupload. Selain FileReader, kita juga butuh createElement untuk membuat elemen HTML baru dan appendChild untuk menambahkannya ke elemen yang sudah ada.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>HTML5 File API</title>
  <style>
      #main {
          width: 300px;
          margin:auto;
          background: #ececec;
          padding: 20px;
          border: 1px solid #ccc;
      } 

      #image-list {
          list-style:none;
          margin:0;
          padding:0;
      }
      #image-list li {
          background: #fff;
          border: 1px solid #ccc;
          text-align:center;
          padding:20px;
          margin-bottom:19px;
      }
      #image-list li img {
          width: 258px;
          vertical-align: middle;
          border:1px solid #474747;
      }

  </style>

</head>

<body>
  <div id="main">
    <h1>Upload Your Images</h1>
    <form method="post" enctype="multipart/form-data"  action="upload.php">
    <input type="file" name="images" id="images" multiple />
    <button type="submit" id="tombol">Upload Files!</button>
    </form>
    <div id="hasil"></div>
    <ul id="image-list">
    </ul>
  </div>
  <script>
      var input = document.getElementById("images"),
      formdata = false; 
      if (window.FormData) {
          formdata = new FormData();
          document.getElementById("tombol").style.display = "none";
      }
      input.addEventListener("change", function (evt) {
          var i = 0, len = this.files.length, img, reader, file;
          var list = document.getElementById("image-list");
          list.innerHTML="";
          for ( i=0; i < len; i++ ) {
              file = this.files[i];
              if (file.type.match(/image.*/)){
                  if ( window.FileReader ) {
                      reader = new FileReader(); 
                      reader.onloadend = function (e) { 
                          var source=e.target.result;
                          var li   = document.createElement("li"),
                          img  = document.createElement("img");
                          img.src = source;
                          li.appendChild(img);
                          list.appendChild(li);
                      };
                      reader.readAsDataURL(file);
                  }
              } 
          }
      }, false);
  </script>
</body>
</html>

Kita bisa menggabungkan file reader dengan Ajax dan FormData untuk mengupload file tanpa meninggalkan halaman. Kita bisa menggunakan append untuk menambahkan beberapa file sekaligus ke dalam FormData sebelum data dikirim dengan AJAX.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>HTML5 File API</title>
  <link rel="stylesheet" href="styleku.css"/>
</head>
<body>
    <div id="main">
       <h1>Upload Your Images</h1>
       <form method="post" enctype="multipart/form-data" action="upload.php">
           <input type="file" name="images" id="images" multiple />
           <button type="submit" id="tombol">Upload Files!</button>
       </form>
       <button onclick="kirim(event)">Upload Files!</button>
       <div id="hasil"></div>
       <ul id="image-list">
       </ul>
    </div>
    <script src="scriptku.js">
    
    </script>
</body>
</html>

Karena script dan CSS-nya panjang, kita pisahkan saja script dari kode HTML-nya. Sebelum mengetik script dan CSS-nya, simpan dulu HTML-nya di file utama server kalian, misalnya "index.php". Ketik script berikut ini dan simpan dalam file "scriptku.js".

var input = document.getElementById("images"),
formdata = false; 
if (window.FormData) {
    formdata = new FormData();
    document.getElementById("tombol").style.display = "none";
} 

input.addEventListener("change", function (evt) {
    var i = 0, len = this.files.length, img, reader, file;
    var list = document.getElementById("image-list");
    list.innerHTML=""; 
    for ( i=0; i < len; i++ ) {
        file = this.files[i];
        if (file.type.match(/image.*/)){
            if ( window.FileReader ) {
                reader = new FileReader();
                reader.onloadend = function (e) { 
                    var source=e.target.result;
                    var li   = document.createElement("li"),
                    img  = document.createElement("img");
                    img.src = source;
                    li.appendChild(img);
                    list.appendChild(li);
                };
                reader.readAsDataURL(file);
            }
        } 
    }
}, false);

function kirim(evt) {
var fileku=document.getElementById("images");
var i = 0, len = fileku.files.length, file;
if(len>0){
    document.getElementById("hasil").innerHTML = "Mengupload . . .";
    if (formdata) {
        for ( i=0; i < len; i++ ) {
            file = fileku.files[i];
                if (!!file.type.match(/image.*/)) {
                     formdata.append("images[]", file);
                } 
            }
        }
        if (formdata) {
            koneksi=new XMLHttpRequest();
            koneksi.open("POST", "upload.php");
            koneksi.send(formdata);
            koneksi.onloadend=function(e){
                document.getElementById("hasil").innerHTML = this.response;
            }
        }
    }
}

Yang terakhir, ketik style CSS berikut dan simpan dalam file "styleku.css".

#main {
  width: 300px;
  margin:auto;
  background: #ececec;
  padding: 20px;
  border: 1px solid #ccc;
}
#image-list {
  list-style:none;
  margin:0;
  padding:0;
}
#image-list li {
  background: #fff;
  border: 1px solid #ccc;
  text-align:center;
  padding:20px;
  margin-bottom:19px;
}
#image-list li img {
  width: 258px;
  vertical-align: middle;
  border:1px solid #474747;
}

Silakan buka lewat server atau website kalian dan lihat hasilnya.
Oh ya, script PHP tujuan dari form-nya bisa kalian lihat di bawah ini.

<?php
foreach ($_FILES["images"]["error"] as $key => $error) {
  if ($error == UPLOAD_ERR_OK) {
    $name = $_FILES["images"]["name"][$key];
    move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
  }
}
echo "<h2>Berhasil meng-upload file</h2>";
?>