contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Cara Validasi Ekstensi File dengan Javascript

Posted in Javascript Jquery Life at 24 Oktober 2017 With 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.

▼ Download Source Code Dibawah Ini ▼


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>

Semoga artikel Cara Validasi ekstesnsi file dengan javascript ini dapat bermanfaat untuk kita amin.

Artikel Rekomendasi



Artikel Terkait

Diskusi