代码之家  ›  专栏  ›  技术社区  ›  Junior

如何使用jquery validation验证文件大小ASP.NETMVC5项目?

  •  1
  • Junior  · 技术社区  · 7 年前

    我有一个网络项目,是用c语言写的ASP.NETmvc5框架。我正在使用 jquery-validation-unobtrusive 包来建立客户端验证。我正在尝试添加一个名为 filesize 它检查附加文件的大小。

    因此,当附加文件的大小大于允许值时,我想显示客户端大小错误消息。

    FileSizeAttribute 属性,以便能够在我的视图模型中用于装饰我的 HttpPostedFileBase CreatePerson

    然后在我的javascript文件中,我添加了以下代码来注册一个名为 filesize 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 允许我像这样将规则/消息添加到验证选项

    $.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;
        }
    });
    

    我可以看到适配器正在注册,但是方法 没有人打电话。

    我期待着显示一个错误消息时,用户上传超过了设置的文件大小,但它是不被调用时,该文件是附加。

    $.validator.addMethod("filesize", function (value, element, param) 未调用可从下载的 MvcWithUnobtrusive

    我做错什么了?我怎样才能注册 文件大小 方法 $.validator ?

    1 回复  |  直到 7 年前
        1
  •  1
  •   user3559349 user3559349    7 年前

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

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

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

    或者,如果您有其他不希望验证的隐藏元素,那么您可以给元素一个类名(比如 class="fileinput" )使用

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