使用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. 该代码似乎是从香菜1 *（see documentation），这是现在已经过时。
2. 即使它看起来来自Parsley 1. *，该代码并不遵循自定义验证程序的正确结构（see an example）。
3. 欧芹在默认情况下不包括input[type=file]。只是为了这个，你的代码永远不会被执行。
4. 自定义验证应parsley-filemaxsize而不是data-filemaxsize

被绑定我已经成功地tweeak的代码，该解决方案如下。您也可以检查working jsfiddle。

请注意：我花了一些时间尝试将此代码转换为Parsley 2. *。但是，我不认为你可以使用欧芹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];