文件上传，未调用客户端脚本？数据注释答案

【问题标题】：File upload, Client script not called ? Data-annotation文件上传，未调用客户端脚本？数据注释
【发布时间】：2016-09-13 12:29:03
【问题描述】：

在我的 MVC Web 应用程序中，我有一个带有 imageupload 组件的表单。 imageupload 图像数据在数据注释的帮助下进行验证。我的服务器端验证正在运行，但我的客户端 jQuery 函数没有被调用......我不知道为什么 - 帮助：

1.在我的视图中上传文件：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/Scripts/jquery.validate.min.js")
@Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js")

<input type="file" id="FileUploader" name="FileUploader" multiple />
<div id="FileDisplay" name="FileDisplay"></div>
@Html.ValidationMessageFor(model => model.FileUploader, "", new { @class = "text-danger" })

2。在我的模型中，我有这个：

[ValidImageUpload]
public IEnumerable<HttpPostedFileBase> FileUploader { get; set; }

3.ValidImageUpload 文件：

public sealed class ValidImageUpload : ValidationAttribute, IClientValidatable
{
    string[] stringArray = { "gif", "jpg", "png", "jpeg" };

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        IEnumerable<System.Web.HttpPostedFileBase> uploadedFiles = (IEnumerable<System.Web.HttpPostedFileBase>)value;
        var firstfile = uploadedFiles.FirstOrDefault();

        if (firstfile != null)
        {
            foreach (var file in uploadedFiles)
            {
                int pos = Array.IndexOf(stringArray, file.ContentType.Substring(6));

                if (pos > -1)
                {
                    if (file.ContentLength > 5242880)
                    {
                        return new ValidationResult(String.Format("Billedet: {0} er for stort. (Max. tilladt billede-størrelse xxxxx)", file.FileName));
                    }
                }
                else
                {
                    return new ValidationResult(String.Format("Billedt: {0} har et forkert format. Tilladte formater er - GIF, JPG, PNG, JPEG", file.FileName));
                }
            }
        }
        return ValidationResult.Success; 
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        ModelClientValidationRule mvr = new ModelClientValidationRule();
        mvr.ErrorMessage = "Forkert format";
        mvr.ValidationType = "validImageUpload";
        return new[] { mvr };
    }
}

jQuery

$(document).ready(function () {
    jQuery.validator.addMethod('validImageUpload', function (value, element, params) {
        var currentDate = new Date();
        alert('Working indsi´side');
            return false;

    }, '');

    jQuery.validator.unobtrusive.adapters.add('validImageUpload', function (options) {
        options.rules['validImageUpload'] = {};
        options.messages['validImageUpload'] = options.message;
    });
});

【问题讨论】：

您已手动生成输入并省略了客户端验证所需的所有data-* 属性。使用@Html.TextBoxFor(m => m.FileUploader, new { type="file", multiple="multiple"})
谢谢。如何结束这个问题。

标签： jquery asp.net-mvc

【解决方案1】：

您没有得到任何客户端验证的原因是您没有在 html 中添加适当的 data-val-* 属性。在您的情况下，始终使用强类型的HtmlHelper 方法来生成您的html

@Html.TextBoxFor(m => m.FileUploader, new { type="file", multiple="multiple"})

该方法在内部从验证属性读取元数据并将适当的属性添加到 html。首次呈现页面时，jquery.validate.unobtrusive.js 文件读取这些属性的值并将规则添加到 jquery.valdate.js 以进行客户端验证。

但是，您的实施还存在多个其他问题。您验证 2 个单独的东西 - 文件大小和文件类型 - 所以您需要 2 个单独的属性。而且您的属性不灵活，因为您已将有效值硬编码到代码中（您必须重复所有代码才能将其应用于另一个您只想允许说 .pdf 文件的属性）。您也没有在 GetClientValidationRules() 方法中返回任何参数来指示哪些文件类型（或文件大小）是有效的。并且javascript函数不应该在document.ready()内。

有关FileTypeAttribute 的实现，请参阅FileExtension Validation using custom validation creates duplicate and invalid data-* attributes。对于FileSizeAttribute 的实现，请参阅Client-side File Upload Size Validation in ASP.NET MVC（请注意，该解决方案适用于单个文件，需要修改以上传多个文件）。

我也推荐你的学习The Complete Guide To Validation In ASP.NET MVC 3 - Part 2。

【讨论】：