自定義客戶端驗證並上傳文件

Question

我正在使用客戶端驗證創建自己的數據注釋，以檢查是否允許選擇的文件，但我無法使其正常工作。 客戶端方法不會啟動。

我沒有收到任何JavaScript錯誤。

模型：

public class FotoAlbumModel
{
    public int AlbumId { get; set; }

    [Filters.Required]
    [MaxLength(150, ErrorMessage = "Dit veld mag niet langer zijn dan 150 tekens.")]
    public string Titel { get; set; }

     [Filters.Required]
    [MaxLength(150, ErrorMessage = "Dit veld mag niet langer zijn dan 2500 tekens.")]
    public string Descriptie { get; set; }

    [Filters.Required]
    [MaxLength(250, ErrorMessage = "Dit veld mag niet langer zijn dan 250 tekens.")]
    public string Keywoorden { get; set; }

    [Filters.Required]
    [LinkName]
    public string Linknaam { get; set; }

    public bool Status { get; set; }

    public int AantalFotos { get; set; }

  [Filters.FileExtensions(FileExtensions = ".bmp,.jpg,.png.gif,.jpeg")]
    public HttpPostedFileBase[] Fotos { get; set; }
}

我的注釋：

public class FileExtensionsAttribute : ValidationAttribute, IClientValidatable
{
    public string FileExtensions { get; set; }

    public override bool IsValid(object value)
    {
        string strValue = value == null ? "" : value.ToString();

        string[] arrayFileExtensions = FileExtensions.Split(',');

        bool isMatch = arrayFileExtensions.Any(x => x.Contains(Path.GetExtension(strValue)));

        if (!isMatch && ErrorMessage == null)
        {
            ErrorMessage = "De extensie van de bestand is niet toegestaan.";
        }
        return isMatch;
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var rule = new ModelClientValidationRule
        {
            ErrorMessage = "De extensie van de bestand is niet toegestaan.",
            ValidationType = "fileextension"

        };
        rule.ValidationParameters.Add("allowedextensions", FileExtensions);

        yield return rule;
    }
}

我的自定義驗證適配器：

$.validator.unobtrusive.adapters.addSingleVal("fileextension", "allowedextensions");

$.validator.addMethod("fileextension", function (value, element, allowedextensions) {
alert('sds');
var arrayAllowedExtensions = allowedextensions.split(',');
var fileExtension = value.split('.').pop();
$.each(arrayAllowedExtensions, function(extension) {
    if (extension == fileExtension) {
        return true;
    }
});
return false;
});

HTML：

   @Html.TextBoxFor(m=> m.Fotos, new {@type="file", @multiple="true", @onchange="makeFileList();", @id="filesToUpload", @style="display: none;"})
                                <input type="button" value="Plaatje(s) selecteren" class="btn btn-green btn-gradient" onclick="document.getElementById('filesToUpload').click();" />
                            <ul id="fileList">
                                <li>No Files Selected</li>
                            </ul>
                            @Html.ValidationMessageFor(m => m.Fotos)

MakeFileList Javascript函數：

<script>
    function makeFileList() {
        var input = document.getElementById("filesToUpload");
        var ul = document.getElementById("fileList");
        while (ul.hasChildNodes()) {
            ul.removeChild(ul.firstChild);
        }
        for (var i = 0; i < input.files.length; i++) {
            var li = document.createElement("li");
            li.innerHTML = input.files[i].name;
            ul.appendChild(li);
        }
        if(!ul.hasChildNodes()) {
            var li = document.createElement("li");
            li.innerHTML = 'No Files Selected';
            ul.appendChild(li);
        }
    }
</script>

有什么想法為什么不啟動該方法？

Answer 1

我認為這是因為您要隱藏FileExtensionsAttribute代碼試圖驗證的控件。

使用Firebug查看您的頁面，您可以看到隱藏的控件<input id="filesToUpload" type="file"具有驗證data-val-fileextension="De extensie van de bestand is niet toegestaan."

如果通過刪除@style="display: none;"屬性來修改文本框@Html.TextBoxFor(m=> m.Fotos ，您將看到您的驗證有效。

不幸的是，我不確定如何解決這個問題。 您有理由不能使用標准文件上傳控件嗎？

Answer 2

更改： @onchange="makeFileList();" 在@Html.TextBoxFor(,,上： @onchange="makeFileList()" （最后刪除分號）