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

Question

我在 Wordpress 的 USP Pro 表单中使用 parsley.js。验证通常有效，但现在我正在尝试验证最大文件大小，但我真的不明白如何去做。

我找到了这些instructions，但无法让它工作。

这是我的代码：

<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 兆字节的图片，但没有任何反应。没有错误或任何东西，控制台中没有任何内容。

我错过了什么？

Answer 1

有几点说明：

1. 该代码似乎来自 Parsley 1.* (see documentation)，现已弃用。
2. 尽管它似乎来自 Parsley 1.*，但该代码并未遵循自定义验证器 (see an example) 的正确结构。
3. 默认情况下，Parsley 不包括 input[type=file]。为此，您的代码永远不会被执行。
4. 自定义验证器应该由parsley-filemaxsize而不是data-filemaxsize绑定

我已经设法调整了代码，解决方案如下。也可以查看working jsfiddle。

请注意：我花了一些时间尝试将此代码转换为 Parsley 2.* 。但是，我认为您不能使用 Parsley 2.*，因为 Custom Validators 只接收值和要求，并且您需要 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>

Answer 2

我已经为同一个问题苦苦挣扎了好几天，现在我找到了一种可能的解决方法。 问题是（如上所述）您不再获得 parsleyField 而是只有需求和值字段。 我的想法是使用需求字段并将输入字段的名称或 ID 与所需的文件大小一起放在那里。

这可能看起来像：

<input type="file" name="Upload" required="required" parsley-filemaxsize="Upload|1.5"/>

那么您应该能够像这样编写自己的验证器：

window.ParsleyValidator
  .addValidator('filemaxsize', function (val, req) {
      var reqs = req.split('|');
      var input = $('input[type="file"][name="'+reqs[0]+'"]');
      var maxsize = reqs[1];
      var max_bytes = maxsize * 1000000, file = input.files[0];

      return file.size <= max_bytes;

  }, 32)
  .addMessage('en', 'filemaxsize', 'The File size is too big.')
  .addMessage('de', 'filemaxsize', 'Die Datei ist zu groß.');

我还没有找到在消息中使用占位符 %s 的解决方案，因为它现在包含不干净的数据......

Answer 3

事实上，这是行不通的。您必须添加file = input[0].files[0];