客戶端文件大小驗證

Question

我想在客戶端執行文件大小驗證。我非常接近這一點。事實上驗證本身可以正常工作，但是當我點擊提交時，該信息就被隱藏了。

$(document).ready(function() { 
    $(".fileToUpload").change(function() { 
     validate_recipe_image_upload(this); 
    }); 
    $("form").submit(function() { 
     $.each($(this).find(".fileToUpload"), function(i, v) { 
      validate_recipe_image_upload(this); 
     }); 
    }); 
}); 

String.prototype.format = function() { 
    var s = arguments[0]; 
    for (var i = 0; i < arguments.length - 1; i++) { 
     var reg = new RegExp("\\{" + i + "\\}", "gm"); 
     s = s.replace(reg, arguments[i + 1]); 
    } 

    return s; 
}; 

function validate_recipe_image_upload(field) { 
    var isValid = validate_image_size(field) && 
     validate_image_format(field); 

    if (isValid) 
     remove_error_message(field); 
} 

function validate_image_format(field) { 
    var ext = $(field).val().split('.').pop().toLowerCase(); 
    var acceptabelExtensions = $(field).data("acceptableFormats").toLowerCase().split(','); 
    if ($.inArray(ext, acceptabelExtensions) == -1) { 
     var msg = String.prototype.format($(field).data("errorMsgFileFormat"), acceptabelExtensions.join(', ')); 
     append_error_message(field, msg); 
     return false; 
    } else { 
     return true; 
    } 
} 

function validate_image_size(field) { 
    if (field.files[0].size > $(field).data("maxSize")) { 
     append_error_message(field, $(field).data("errorMsgMaxSize")); 
     return false; 
    } else { 
     return true; 
    } 
} 

function append_error_message(field, msg) { 
    var f = $(field); 
    var sib = f.siblings(); 
    $.each(sib, function (i, v) { 
     var name1 = $(v).data("valmsgFor"); 
     var name2 = f.attr("name"); 
     if (name1 == name2) { 
      $(v).attr("class", "field-validation-error"); 
      $(v).text(msg); 
      return; 
     } 
    }); 
} 

function remove_error_message(field) { 
    var f = $(field); 
    var sib = f.siblings(); 
    $.each(sib, function (i, v) { 
     var name1 = $(v).data("valmsgFor"); 
     var name2 = f.attr("name"); 
     if (name1 == name2) { 
      $(v).attr("class", "field-validation-valid"); 
      return; 
     } 
    }); 
} 

而且在CSHTML：

<div class="editor-label"> 
      @Html.LabelFor(model => model.Photo) 
      @*<label for="file">Filename:</label>*@ 
     </div> 
     <div class="editor-field"> 
      <input type="file" id="Photo" name="Photo" accept="image/*" class="fileToUpload" data-error-msg-max-size="--Max size is 1MB" data-error-msg-file-format="--Only image files acceptable: {0}." data-max-size="1500000" data-acceptable-formats="jpg,jpeg,gif,png"/> 
      @Html.ValidationMessageFor(model => model.Photo) 
     </div> 

基本上當我選擇一個文件，該文件是大於1MB我得到錯誤信息的一致好評原來的MVC。到目前爲止這麼好，但是當我點擊提交按鈕時，這個消息就消失了（因爲它對於MVC驗證器是有效的）。

是否有一個聰明的技巧來處理這個？

Answer 1

如果從形式返回false提交監聽器，它會阻止表單提交：

$("form").submit(function() { 
    var isValid = true; 
    $(".fileToUpload", this).each(function(i, v) { 
     isValid = isValid && validate_recipe_image_upload(this); 
    }); 
    return isValid; 
}); 

function validate_recipe_image_upload(field) { 
    var isValid = validate_image_size(field) && 
     validate_image_format(field); 

    if (isValid) 
     remove_error_message(field); 

    return isValid; 
}