Parsley.js验证文件大小?

时间:2013-12-02 02:51:32

标签: javascript jquery validation filesize parsley.js

如果可能的话,我正在尝试使用Parsley.js验证上传的文件大小。我也对其他方法持开放态度。 (我尝试过使用其他方法但没有成功)。如果我可以选择的话,这种方法将是我最想要的方法 - 如果这有意义的话。 (主要是因为我使用欧芹进行所有其他验证)。

我收到的错误是:Uncaught TypeError:无法调用null的方法'parsley'。我也试过修改其他代码但没有成功。

Here是欧芹文档。

是的,这是针对课堂上的PHP项目(这部分不是必需的)。但是,当上传的文件太大时 - 我使用php提交检查文件大小 - 它会破坏我的sql上传。所以我想在上传之前验证客户端。我没有成功。如果文件大小太大,我需要表单不提交。此外,我确实意识到我尝试的方法可能无法在所有浏览器中使用。

我有这些脚本:

<script language="javascript" src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script language="javascript" src="js/parsley.js"></script>

这是我的自定义欧芹代码(找到here):

<script language="javascript">
$('myFile').parsley({
  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 1.5 megabytes."
  }
});
</script>

这是我的表单代码(我删除了许多其他表单字段):

<form action="register.php" enctype="multipart/form-data" method="post" autocomplete="on" class="form-horizontal" parsley-validate id="register">
                <div class="fields">


                <div class="field upl">
                <label for="file">Face picture:</label>
                <input data-filemaxsize="1.5" type="file" name="file" id="myFile" accept="image/jpeg" required/>
                </div>

                <input type="submit" value="Register" class="login" id="register" onsubmit="return validation(this)"  />
                </div>
                </form>

此外::(!Modernizr.fileapi) - &gt;这段代码做什么/指的是什么?

2 个答案:

答案 0 :(得分:1)

我有一种感觉,你所写的验证器不符合所需的相同结构。我之前使用过Parsley.js,但我从未编写过新的验证器。如果您查看https://github.com/guillaumepotier/Parsley.js/blob/master/parsley.extend.js,您会看到每个验证器都返回validate函数。

尝试将其添加到验证器中。

答案 1 :(得分:1)

问题是我正在使用的原生质日期选择器。我通过切换到jQuery验证插件修复了我遇到的问题。验证器现在工作得很好!然而,我用php运行所有相同的验证服务器端。我真的很感激输入,最后切换库解决了一切!