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.