Membuat Cek/ Validasi Ukuran Inputan (File Size) Dinamis Menggunakan JQuery

Kali ini saya akan membuat contoh fungsi validasi ukuran file menggunakan JQuery. 

Langkah pertama siapkan inputan file terlebih dahulu, misal saya buat inputan file dengan id = foto :

 <div>  
   <label>  
     <span class="required">Foto</span>  
   </label>  
   <input type="file" name="foto" id="foto" class="form-control form-control-solid" required/>  
 </div>  

Kemudian, buat fungsi validasi ukuran file (file size ) dinamis pada tag script seperti contoh dibawah ini :

 <script>  
 function maxInput(inputId){  
   var files = $('#'+inputId)[0].files;  //untuk mengambil file pertama
   var maxFileSize = 2 * 1024 * 1024; // Ukuran file maksimum dalam byte (2 MB) kuncinya diangka 2  
   for(var i = 0; i<files.length; i++){  
   var totalSize =+ files[i].size;  
   }  
   if (totalSize > maxFileSize) {  
     alert('File Melebihi Ukuran Maksimal')  //jika tidak menggunakan library sweet alert bisa menggunakan alert saja
     Swal.fire({  
       title: 'Error!',  
       text: "Ups! Ukuran file melebihi 2 MB :(",  
       icon: 'error'  
     })  
     $('#'+inputId).val(''); 
   }  
 }    
 $(document).on('input', '#foto', function () {  
   maxInput('foto')  
 });  
 <script/>  

Penjelasan dari script diatas yaitu sebagai berikut :

Untuk menggunakan fungsi validasi file size tersebut yaitu melalui fungsi maxInput().

files[i].size  digunakan untuk mendapatkan ukuran file yang telah dipilih.

Swal.fire()  digunakan untuk menampilkan pesan melalui librari sweetalert, jika tidak menggunakan library ini maka silahkan hapus coding berikut :

     Swal.fire({  
       title: 'Error!',  
       text: "Ups! Ukuran file melebihi 2 MB :(",  
       icon: 'error'  
     }) 
 

$('#'+inputId).val('') digunakan untuk mengosongkan file yang dipilih jika ukurannya melebihi 2 mb.

$(document).on('input', '#foto', function ()  digunakan untuk menjalankan fungsi ketika inputan dengan id foto telah diisi.

maxInput('foto') digunakan untuk menjalankan fungsi maxInput pada id foto.