如何在 ASP.NET MVC 5 项目中使用 jquery-validation-unobtrusive 验证文件大小？

Question

我有一个在 ASP.NET MVC 5 框架之上使用 c# 编写的 Web 项目。我正在使用 jquery-validation-unobtrusive 包来建立客户端验证。我正在尝试添加一个名为 filesize 的新规则来检查附件的大小。

因此，当附件的大小超过允许的大小时，我想显示客户端大小错误消息。

我创建了 FileSizeAttribute attribute to be able to use in my view-models to decorate my HttpPostedFileBase properties with to set the max allowed size. The CreatePerson class 展示了我是如何使用它的。

然后在我的 javascript 文件中，我添加了以下代码来注册一个名为 filesize in the jquery-validator.

的新方法

型号

[Required, FileSize(4000), AcceptedFileExtension("jpg|pdf|csv|text")]
public HttpPostedFileBase Picture { get; set; }

查看

<div class="form-group" id="Picture_Block">
    <label class="control-label col-md-2" for="Picture">Picture</label>
    <div class="col-md-10">
        <div class="input-group uploaded-file-group max-input-width">
            <label class="input-group-btn">
                <span class="btn btn-default">
                    Browse 
                    @Html.HiddenFor(x => x.Picture, new { @class= "hidden force-validaion", type = "file" })
                </span>
            </label>
            <input class="form-control uploaded-file-name" readonly="" type="text">
        </div>
        @Html.ValidationMessageFor(x => x.Picture)
    </div>
</div>

验证脚本

$.validator.addMethod("filesize", function (value, element, param) {
    if (value === "") {
        return true;
    }
    var maxBytes = parseInt(param);
    if (element.files !== undefined && element.files[0] !== undefined && element.files[0].size !== undefined) {
        console.log('Dumping the file object', element.files[0]);
        var filesize = parseInt(element.files[0].size);
        return filesize <= maxBytes;
    }
    return true;
});

然后我添加了一个名为 filesize 的新的不显眼的适配器，以允许我将 rule/message 添加到验证选项中，就像这样

$.validator.unobtrusive.adapters.add('filesize', ['maxfilesize'], function (options) {
    // set the parameter
    options.rules['filesize'] = options.params.maxfilesize;
    if (options.message) {
        // If there is a message, set it for the rule
        options.messages['filesize'] = options.message;
    }
});

我可以看到正在注册适配器，但未调用方法 filesize。

我希望在用户上传超过设置的文件大小时显示一条错误消息，但是在附加文件时不会调用它。

我创建了一个存储库来展示如何不调用 $.validator.addMethod("filesize", function (value, element, param)，可以从 MvcWithUnobtrusive

下载

我在这里做错了什么？如何使用 $.validator 注册 filesize 方法？

Answer 1

您 Picture 的文件输入是隐藏的，默认情况下，隐藏的输入不会被验证。

您可以通过包含以下脚本来覆盖默认值

$.validator.setDefaults({ 
    ignore: [] 
});

或者如果您有其他不想验证的隐藏元素，那么您可以给该元素一个 class 名称（比如 class="fileinput"）并使用

$.validator.setDefaults({ 
    ignore: ":hidden:not('.fileinput')"
});

如何在 ASP.NET MVC 5 项目中使用 jquery-validation-unobtrusive 验证文件大小？

How to validate the file's size with jquery-validation-unobtrusive in ASP.NET MVC 5 project?

jquery

jquery-validate

unobtrusive-validation

asp.net-mvc-5