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

我正在Wordpress中使用表单。一般来说，验证是有效的，但现在我正在尝试验证最大文件大小，我真的不知道如何进行验证

我找到了这些，但没能成功

这是我的密码：

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

window.ParsleyConfig={
验证器：{
filemaxsize:函数（val、最大兆字节、parsleyField）{
如果（！modernizer.fileapi）{return true；}
var$file\u input=$（parsleyField.element）；
if（$file_input.is（'：not（input[type=“file”]））{
log（“对最大文件大小的验证仅对文件输入类型有效”）；
返回true；
}
var max_bytes=max_MB*字节/u MB，files=$file_input.get（0）.files；
如果（files.length==0）{
//没有文件，因此无效。（必要的检查应确保选择了文件）
返回true；
}
return files.length==1&&files[0]。size

该代码似乎来自Parsley 1.*（），该代码现在已被弃用
尽管它似乎来自Parsley 1.*，但该代码没有遵循自定义验证器（）的正确结构
默认情况下，欧芹排除了
input[type=file]
。正因为如此，您的代码永远不会执行
自定义验证器应该由
parsley filemaxsize
绑定，而不是
data filemaxsize
我已经设法破解了代码，解决方案如下。你也可以检查

请注意：我已经花了一些时间尝试将此代码转换为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>


提交
$（文档）.ready（函数（）{
$（'形式'）。欧芹({
验证器：{
filemaxsize:function（）{
返回{
验证：函数（val、最大字节数、parsleyField）{
如果（！modernizer.fileapi）{return true；}
var$file\u input=$（parsleyField.element）；
if（$file_input.is（'：not（input[type=“file”]））{
log（“对最大文件大小的验证仅对文件输入类型有效”）；
返回true；
}
var max_bytes=max_MB*字节/u MB，files=$file_input.get（0）.files；
如果（files.length==0）{
//没有文件，因此无效。（必要的检查应确保选择了文件）
返回true；
}
return files.length==1&&files[0]。size我已经为同一个问题绞尽脑汁好几天了，现在我找到了一个可能的解决方法。
问题是（如上所述），您不再获得parsleyField，而只有requirement和value字段。
我的想法是使用requirement字段，将输入字段的名称或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ß.');

window.ParsleyValidator
.addValidator（'filemaxsize'，函数（val，req）{
var reqs=请求拆分（“|”）；
var input=$（'input[type=“file”][name=“”+reqs[0]+'”）；
var maxsize=需求[1]；
var max_bytes=maxsize*1000000，file=input.files[0]；
return file.size事实上，这不起作用。您必须添加
file=input[0]。文件[0]；
感谢您的澄清和帮助，但这仍然不起作用为什么不起作用？您测试过JSFIDLE吗？是的，它在小提琴上起作用，但在网站上不起作用，可能是因为我有欧芹2。*这个欧芹插件可能对任何遇到这个问题的人有用：（检查图像验证程序）