Cara Validasi Ekstensi File dengan Javascript

Publish Date : 24-10-2017 , dibaca 6078 kali, Hari ini dibaca : 1 kali ,0 comments

Membuat Validasi sebelum kita lakukan upload file ke server merupakan hal yang wajib di terapkan pada aplikasi web kita. Hal ini di lakukan untuk memastikan user telah memilih tipe file sesuai dengan keinginan server (programer).

Dalam tutorial ini, kita akan membuat validasi tipe file (ekstensi) dengan JavaScript. Menggunakan validasi script yang saya buat, kamu dapat membatasi pengguna untuk meng-upload hanya jenis file yang diperbolehkan.

Dalam contoh kali ini kita akan membuat validasi ekstensi file dokument (word,pdf) dan file image yang berupa file .jpg, .jpeg, .png, dan .gif. Jika ekstensi file yang dipilih tidak cocok dengan ekstensi yang sudah diatur, pesan peringatan akan ditampilkan kepada pengguna. Jika tidak, pratinjau gambar yang dipilih akan ditampilkan di bawah bidang file input.

<html>
<body>
<form action="uploadAction" method="post" enctype="multipart/form-data" onsubmit="return validation(this)">
<input type="file" name="file"/>
<input type="submit" value="Upload"/>
<div id="valid_msg"/>
</form>
</body>
</html>

Tlong di perhatikan hal berikut ini:
1) Form’s enctype harus ‘multipart/form-data’.
2) Form’s method harus menggunakan METHOD ‘post’.
3) “returns: statement in onsubmit function.

function validation(thisform)
{
   with(thisform)
   {
      if(validateFileExtension(file, "valid_msg", "pdf/office/image files are only allowed!",
      new Array("jpg","pdf","jpeg","gif","png","doc","docx","xls","xlsx","ppt","txt")) == false)
      {
         return false;
      }
      if(validateFileSize(file,1048576, "valid_msg", "Document size should be less than 1MB !")==false)
      {
         return false;
      }
   }
}

Script Lengkap

<html>
<script>
function validation(thisform)
{
   with(thisform)
   {
      if(validateFileExtension(file, "valid_msg", "pdf/office/image files are only allowed!",
      new Array("jpg","pdf","jpeg","gif","png","doc","docx","xls","xlsx","ppt","txt")) == false)
      {
         return false;
      }
      if(validateFileSize(file,1048576, "valid_msg", "Document size should be less than 1MB !")==false)
      {
         return false;
      }
   }
}
</script>
<body>
<form action="uploadAction" method="post" enctype="multipart/form-data" onsubmit="return validation(this)">
<input type="file" name="file"/>
<input type="submit" value="Upload"/>
<div id="valid_msg"/>
</form>
</body>
</html>