Как проверить размер файла с помощью jquery-validation-unobtrusive в проекте ASP.NET MVC 5? - PullRequest
Новая
       39

Как проверить размер файла с помощью jquery-validation-unobtrusive в проекте ASP.NET MVC 5?

0 голосов
/ 04 сентября 2018

У меня есть веб-проект, написанный на c # поверх платформы ASP.NET MVC 5. Я использую jquery-validation-unobtrusive пакет, чтобы установить проверку на стороне клиента. Я пытаюсь добавить новое правило с именем filesize, которое проверяет размер вложенного файла.

Поэтому, когда размер вложенного файла превышает допустимый, я хочу показать сообщение об ошибке размера клиента.

Я создал атрибут FileSizeAttribute , чтобы иметь возможность использовать его в моих моделях представления для украшения моих свойств HttpPostedFileBase с помощью установки максимально допустимого размера. Класс CreatePerson показывает, как я его потребляю.

Затем в свои файлы javascript я добавил следующий код, чтобы зарегистрировать новый метод с именем filesize в jquery-validator .

Модель 

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

View 

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

Я вижу, что адаптер регистрируется, но метод filesize не вызывается.

Я ожидаю показать сообщение об ошибке, когда пользовательская загрузка превышает установленный размер файла, однако оно не вызывается, когда файл прикреплен.

Я создаю хранилище, чтобы показать, как не вызывается $.validator.addMethod("filesize", function (value, element, param), который можно загрузить с MvcWithUnobtrusive

Что я здесь не так делаю? Как я могу зарегистрировать метод filesize с помощью $.validator?

1 Ответ

0 голосов
/ 05 сентября 2018

Ваш файл для Picture скрыт, и по умолчанию скрытые данные не проверяются.

Вы можете переопределить значение по умолчанию, включив следующий скрипт 

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

или если у вас есть другие скрытые элементы, которые вы не хотите проверять, вы можете дать элементу имя класса (скажем, class="fileinput") и использовать 

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