使用 parsley.js 验证最大文件上传大小

我在用着欧芹.js in a USP ProWordpress 中的表单。一般来说，验证是有效的，但现在我正在尝试验证最大文件大小，但我不太明白如何做到这一点。

我找到了这些指示，但无法使其发挥作用。

这是我的代码：

<input type="file" data-parsley-error-message="This field is required" required="required" placeholder="File(s)" name="usp-files[]" multiple="multiple" data-filemaxsize="1.5" maxlength="255" class="file-input usp-input usp-input-files usp-clone" id="usp-multiple-files" data-parsley-id="3077">


window.ParsleyConfig = {
    validators: {
        filemaxsize: function (val, max_megabytes, parsleyField) {
            if (!Modernizr.fileapi) { return true; }

            var $file_input = $(parsleyField.element);
            if ($file_input.is(':not(input[type="file"])')) {
                console.log("Validation on max file size only works on file input types");
                return true;
            }

            var max_bytes = max_megabytes * BYTES_PER_MEGABYTE, files = $file_input.get(0).files;

            if (files.length == 0) {
                // No file, so valid. (Required check should ensure file is selected)
                return true;
            }

            return files.length == 1 && files[0].size <= max_bytes;
        }
    },
    messages: {
        filemaxsize: "The file cannot be more than %s megabytes."
    }
};

window.Modernizr.addTest('fileapi', function() { return window.File && window.FileReader; });
window.BYTES_PER_MEGABYTE = 1048576;

jQuery(function($){
    $('.usp-form').parsley();
});

我尝试上传一张 19 MB 的图片，但没有任何反应。没有错误或任何东西，控制台中没有任何内容。

我缺少什么？

有几点说明：

1. 该代码似乎来自 Parsley 1.* (查看文档)，现已弃用。
2. 尽管它看起来来自 Parsley 1.*，但该代码并未遵循自定义验证器的正确结构（看一个例子).
3. 欧芹不包括input[type=file]默认情况下。为此，您的代码永远不会被执行。
4. 自定义验证器应该通过绑定parsley-filemaxsize代替data-filemaxsize

我已经设法调整代码，解决方案如下。您还可以检查工作中的jsfiddle.

请注意：我花了一些时间尝试将此代码转换为 Parsley 2.* 。但是，我认为您不能使用 Parsley 2.*，因为自定义验证器仅接收值和要求，并且您需要 parsleyField.$ 元素来验证文件大小。

<form id="form">
    <input type="file" data-parsley-error-message="This field is required" required="required"
       placeholder="File(s)" name="usp-files[]" multiple="multiple" parsley-filemaxsize="1.5"
       maxlength="255" class="file-input usp-input usp-input-files usp-clone" id="usp-multiple-files" />
    <button type="submit">Submit</button>
</form>

<script>
$(document).ready(function() {
    $('#form').parsley({
        validators: {
            filemaxsize: function() {
                return {
                    validate: function (val, max_megabytes, parsleyField) {
                        if (!Modernizr.fileapi) { return true; }

                        var $file_input = $(parsleyField.element);
                        if ($file_input.is(':not(input[type="file"])')) {
                            console.log("Validation on max file size only works on file input types");
                            return true;
                        }

                        var max_bytes = max_megabytes * BYTES_PER_MEGABYTE, files = $file_input.get(0).files;

                        if (files.length == 0) {
                            // No file, so valid. (Required check should ensure file is selected)
                            return true;
                        }

                        return files.length == 1  && files[0].size <= max_bytes;
                    },
                    priority: 1
                };
            }
        },
        messages: {
            filemaxsize: "The file cannot be more than %s megabytes."
        }
        , excluded: 'input[type=hidden], :disabled'
    });

    /**
     * Extension to Modernizer for File API support
     */
    window.Modernizr.addTest('fileapi', function() { return window.File && window.FileReader; });

    window.BYTES_PER_MEGABYTE = 1048576;

    $('#form').on("submit", function(e) {
        e.preventDefault();
        $(this).parsley("validate");
    });
});
</script>