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

客户端文件大小验证

1 个答案: