title: stop attaching files that size more than 5mb to multiple file input
body: <p>I developed custom multiple file upload feature like follows</p>
  
  <p><a href="https://i.stack.imgur.com/rkVWH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rkVWH.png" alt="enter image description here"></a> </p>
  
  <p>this is the whole code for above module</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="file_count"&gt;&lt;/div&gt;
  &lt;input type="file" id="uploadFile" name="FileUpload" multiple="multiple" /&gt;
  &lt;div id="upload_prev"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Script</strong></p>
  
  <pre><code>var fileCount = 0;
  
  var showFileCount = function() {
    $('#file_count').text('# Files selected: ' + fileCount);
  };
  
  showFileCount();
  
  $(document).on('click', '.close', function() {
    $(this).parents('span').remove();
    fileCount -= 1;
    showFileCount();
  })
  
  $('#uploadFile').on('change', function() {
  
    var filename = this.value;
    var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex &gt;= 0) {
      filename = filename.substring(lastIndex + 1);
    }
    var files = $('#uploadFile')[0].files;
    for (var i = 0; i &lt; files.length; i++) 
    {
      if (files[i].size &lt; 5242880) 
      {
         $("#upload_prev").append('&lt;span&gt;' + '&lt;div class="filenameupload"&gt;' + files[i].name + ' abc&lt;/div&gt;' + '&lt;p class="close" &gt;X&lt;/p&gt;&lt;/span&gt;');
      }
      else
      {
         alert("File size is more than 5MB");
         event.preventDefault();
         false;
      }
    }
    fileCount += files.length;
    showFileCount();
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.filenameupload {
    width: 98%;
  }
  
  #upload_prev {
    border: thin solid #000;
    width: 65%;
    padding: 0.5em 1em 1.5em 1em;
  }
  
  #upload_prev span {
    display: flex;
    padding: 0 5px;
    font-size: 12px;
  }
  </code></pre>
  
  <p>I'm trying to stop files, that size more than 5mb attaching to this 'uploadFile' multiple file input,  using above code.</p>
  
  <p>but it can 'append' div items properly and can't stop attaching files(size more than 5mb) to above 'uploadFile' multiple file input</p>
  
  <p>How can I resolve this</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>This is a ASP.NET MVC Application, this is how I'm getting files from backend </p>
  
  <pre><code>[HttpPost]        
  public ActionResult SomeAction(ModelClass model)
  {
      var attchaedfiles = Request.Files;
      ...
  }
  </code></pre>