显示使用jquery的输入文件上传大小限制的客户端验证消息？

Question

I am trying validate upload file limit to 2.5 mb max. I need to show validation message on <span class="field-validation-valid" data-valmsg-for="Attachement" data-valmsg-replace="true"></span> when focus lost from the field.

right now I am validating at client side like this.

 <div class="col-sm-7">
    <input class="form-control" id="Attachement" name="Attachement" type="file" value="">
    <span class="field-validation-valid" data-valmsg-for="Attachement" data-valmsg-replace="true"></span>
  </div>

var attachement = document.getElementById('Attachement');
attachement.onchange = function() {
    var file = attachement.files[0];
    if (file.size > 2621440) {
         //Now Here I need to update <span> 

       alert('Filesize must 2.5mb or below'); // don't want alert message
    }
};

example

<div class="col-sm-7">
  <input class="form-control valid" data-val="true" data-val-required="The First Name field is required." id="FirstName" name="FirstName" placeholder="First Name" required="required" type="text" value="">
  <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true" style="color:Red"></span>
</div>

after validation

<div class="col-sm-7">
  <input class="form-control input-validation-error" data-val="true" data-val-required="The First Name field is required." id="FirstName" name="FirstName" placeholder="First Name" required="required" type="text" value="">
  <span class="field-validation-error" data-valmsg-for="FirstName" data-valmsg-replace="true" style="color:Red"><span for="FirstName" class="">
        The First Name field is required.</span>
  </span>
</div>

and also update css class from <input class="form-control"... to <input class="form-control input-validation-error"... to highlight the textbox to red.

How to do in jquery?

Answer 1

I don't know if there's a jQuery equivalent to file.size , but you can simply get the DOM object from the jQuery object with .get() and use the Javascript property.

$("#Attachement").change(function() {
    var file = $(this).get(0);
    if (file.size && file.size > 2621440) {
        $(this).addClass("input-validation-error").siblings(".field_validation-valid").text("File must be smaller than 2.5MB.");
    } else {
        $(this).removeClass("input-validation-error").siblings(".field_validation-valid").empty();
    }
}