使用 jQuery 验证检查图像大小不起作用

Question

我正在将图像上传到文件夹，但在上传之前，我正在检查图像扩展名和大小。我正在使用 jQuery 验证。

我在上传问题之前检查了 SO，并找到了代码。但问题是当我上传小于 100kb 的图像（实际图像大小为 98kb）时，我收到错误"File size must be less than 5"。我尝试了另一个 3.8MB 的图像，但仍然出现相同的错误。

您能帮我确定我必须在这里使用多大尺寸的图像吗？文件大小是多少：5？

谁能帮我解决这个问题？

$.validator.addMethod('filesize', function(value, element, param) {
  return this.optional(element) || (element.files[0].size <= param)
}, 'File size must be less than {0}');

$(function($) {
  "use strict";
  $('#form').validate({
    rules: {
      image: {
        //required: true,
        extension: "jpg,jpeg,png",
        filesize: 5,
      }
    },
  });
});

<form id="form" method="post" action="">
  <input type="file" name="image" />
  <input type="submit" value="Upload" />
</form>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>

Answer 1

通常在这些类型中，文件大小以字节为单位指定。所以你必须相应地将它乘以 1024 乘数。 例如，如果要检查文件大小是否小于 5MB，则应使用

image: {
  extension: "jpg,jpeg,png",
  filesize: 5*1024*1024,
}

Answer 2

您的参数仅设置为5

$('#form').validate({
    rules: {
      image: {
        ....
        filesize: 5,  ...

即 5 个 BYTES，因此您当然会收到任何 98 kB 或 3.8 MB 文件的错误消息。由于它们都大于 5 个字节，因此它们不符合您的自定义规则，该规则只允许文件小于小于 5 个字节。

如果您想允许小于 5 MB 的文件，请尝试 5242880。

filesize: 5242880 // <- 5 MB

$.validator.addMethod('filesize', function(value, element, param) {
  return this.optional(element) || (element.files[0].size <= param)
}, 'File size must be less than {0} bytes');

$(function($) {
  "use strict";
  $('#form').validate({
    rules: {
      image: {
        //required: true,
        extension: "jpg,jpeg,png",
        filesize: 5242880 // <- 5 MB
      }
    },
  });
});

<form id="form" method="post" action="">
  <input type="file" name="image" />
  <input type="submit" value="Upload" />
</form>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>