Question

我在Wordpress中以parsley.js形式使用USP Pro。一般情况下，验证工作正常，但现在我尝试验证最大文件大小，而我真的不明白该怎么做。

我发现了这些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

有几点评论：

该代码似乎来自Parsley 1. *（see documentation），现已弃用。
即使它似乎来自Parsley 1. *，该代码也不遵循自定义验证器（see an example）的正确结构。
Parsley默认排除input[type=file]。就此而言，您的代码永远不会被执行。
自定义验证程序应由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，但只有require和value字段。我的想法是使用需求字段，并将输入字段的名称或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];

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

3 个答案: