Question

我正在尝试验证上传文件限制为最大2.5 MB。当焦点从现场丢失时，我需要在<span class="field-validation-valid" data-valmsg-for="Attachement" data-valmsg-replace="true"></span>上显示验证消息。

现在我在这样的客户端进行验证。

 <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
    }
};

例如

<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>

验证后

<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>

并将css类从<input class="form-control"...更新为<input class="form-control input-validation-error"...，以将文本框突出显示为红色。

如何在jquery中做？

Answer 1

我不知道是否有一个等同于file.size的jQuery，但是您只需使用.get()从jQuery对象获取DOM对象并使用Javascript属性。

$("#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();
    }
}

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

例如

1 个答案: