我可以在jQuery验证中访问HttpPostedFileBase的属性吗

本文关键字：HttpPostedFileBase 属性访问 jQuery 验证我可以 | 更新日期: 2023-09-27 18:26:40

我目前正在创建一些自定义属性来进行上传文件验证。

其中之一是FileSizeAttribute，以强制执行某些限制（例如，不能大于x字节或小于y字节）。

有什么方法可以访问HttpPostedFileBase的ContentLength属性吗？我正在阅读一篇关于文件扩展名验证的教程，作者展示了一些简单验证文件扩展名的示例代码。

我想扩展到验证文件大小客户端（除了服务器端），这样我就可以在他们上传之前告诉他们是否超出了大小限制。

从可用的代码片段来看，他似乎只能访问文件名：

jQuery.validator.addMethod("fileextensions", function (value, element, param) {
    var extension = getFileExtension(value).toLowerCase();
    var validExtension = $.inArray(extension, param.fileextensions) !== -1;
    return validExtension;
});

是我错了还是我只是错过了什么？我从未使用过jQuery，对JavaScript也有一点了解，所以我真的不知道这是否可能。

我可以在jQuery验证中访问HttpPostedFileBase的属性吗

如果浏览器支持File API，则可以实现此操作。查询size属性很简单。

这里有一个例子：

[AttributeUsage(AttributeTargets.Field | AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
public class FileExtensionsAttribute : ValidationAttribute, IClientValidatable
{
    private List<string> ValidExtensions { get; set; }
    public int MaxContentLength { get; set; }
    public FileExtensionsAttribute(string fileExtensions)
    {
        ValidExtensions = fileExtensions.Split('|').ToList();
    }
    public override bool IsValid(object value)
    {
        HttpPostedFileBase file = value as HttpPostedFileBase;
        if (file != null)
        {
            var fileName = file.FileName;
            var isValidExtension = ValidExtensions.Any(y => fileName.EndsWith(y));
            var isValidContentLength = file.ContentLength < MaxContentLength;
            return isValidExtension && isValidContentLength;
        }
        return true;
    }
    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var rule = new ModelClientValidationRule();
        rule.ValidationType = "file";
        rule.ErrorMessage = this.FormatErrorMessage(ErrorMessage);
        rule.ValidationParameters["fileextensions"] = string.Join(",", ValidExtensions);
        rule.ValidationParameters["maxcontentlength"] = MaxContentLength.ToString();
        yield return rule;
    }
}

型号：

public class MyViewModel
{
    [FileExtensions("txt|doc", MaxContentLength = 200000)]
    public HttpPostedFileBase File { get; set; }
}

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }
    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

视图：

@model MyViewModel
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    (function ($) {
        var getFileExtension = function (fileName) {
            var extension = (/[.]/.exec(fileName)) ? /[^.]+$/.exec(fileName) : undefined;
            if (extension != undefined) {
                return extension[0];
            }
            return extension;
        };
        var getFileSize = function (fileElement) {
            if (fileElement.files && fileElement.files.length > 0) {
                return fileElement.files[0].size;
            }
            return -1;
        };
        $.validator.unobtrusive.adapters.add(
            'file', ['fileextensions', 'maxcontentlength'], function (options) {
                var params = {
                    fileextensions: options.params.fileextensions.split(','),
                    maxcontentlength: options.params.maxcontentlength
                };
                options.rules['file'] = params;
                if (options.message) {
                    options.messages['file'] = options.message;
                }
            }
        );
        $.validator.addMethod('file', function (value, element, params) {
            var extension = getFileExtension(value);
            var validExtension = $.inArray(extension, params.fileextensions) !== -1;
            var fileSize = getFileSize(element);
            return validExtension && fileSize < parseInt(params.maxcontentlength);
        }, '');
    })(jQuery);
</script>
@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.LabelFor(x => x.File)
    @Html.EditorFor(x => x.File)
    @Html.ValidationMessageFor(x => x.File)
    <button type="submit">OK</button>
}

编辑器模板（~/Views/Shared/EditorTemplates/HttpPostedFileBase）:

@model HttpPostedFileBase
@Html.TextBoxFor(model => model, new { type = "file" })