如何使用 Bootstrap 验证器来验证文件大小和文件类型答案

【问题标题】：How to use Bootstrap validator to validate file size and file type如何使用 Bootstrap 验证器来验证文件大小和文件类型
【发布时间】：2016-09-14 11:00:09
【问题描述】：

我正在使用 Bootstrap 验证器 (Validator plugin) 来验证我的表单，但我有一个文件输入，我想对文件类型和文件大小（pdf、docx、doc..）进行自定义验证。

<div class="form-group">
     <div class="input-group">
      <label class="input-group-btn">
       <span class="btn btn-primary">
Browse&hellip; <input type="file" style="display: none;" name="cv" required data-filesize="5242880" data-filesize-error="Max 5MB">
       </span>
     </label>
     <div class="help-block with-errors"></div>
      <input type="text" class="form-control" readonly>
     </div>
</div>

我需要一些关于如何使用这个插件的指导，以便在后端运行自己的验证之前验证前端的输入。

【问题讨论】：

您提供的链接已损坏
@Ish 已修复。谢谢！
@Daniel 我切换到this plugin，对我来说更合适。如果您愿意，这里是自定义验证的示例：parsleyjs.org/doc/examples/customvalidator.html

标签： jquery twitter-bootstrap validation

【解决方案1】：

here 的代码为我工作：

<form id="fileForm" class="form-horizontal" enctype="multipart/form-data">
    <div class="form-group">
        <label class="col-sm-3 control-label">Avatar</label>
        <div class="col-sm-4">
            <input type="file" class="form-control" name="avatar" />
        </div>
    </div>
</form>

<script type="text/javascript">
$(document).ready(function() {
    $('#fileForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            avatar: {
                validators: {
                    file: {
                        extension: 'jpeg,png',
                        type: 'image/jpeg,image/png',
                        maxSize: 2048 * 1024,
                        message: 'The selected file is not valid'
                    }
                }
            }
        }
    });
});
</script>

【讨论】：

【解决方案2】：

示例摘自：https://github.com/1000hz/bootstrap-validator/issues/73

$('form[data-toggle="validator"]').validator({
  custom: {
    filesize: function ($el) {
      var maxKilobytes = $el.data('filesize') * 1024
      if ($el[0].files[0].size > maxKilobytes) {
        return "File must be smaller than " + $el.data('filesize') + " kB."
      }
    },
    
    //custom file type validation
    filetype: function ($el) {
      var acceptableTypes = $el.prop('accept').split(',');
      var fileType = $el[0].files[0].type;
     
      if (!$.inArray(fileType, acceptableTypes)) {
        return "Invalid file type"
      }
    
    
    }
  }
})

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="http://1000hz.github.io/bootstrap-validator/dist/validator.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="well">
  <form data-toggle="validator">

    <div class="form-group form-group-file">
      <input type="file" id="file1" name="file" class="form-control" data-filesize="5000"
             data-filetype="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/rtf"/>
      <div class="help-block with-errors"></div>
    </div>

    <div class="form-group">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </form>
</div>
</body>
</html>

【讨论】：

很好的例子。你知道为什么当你尝试选择一个文件时，窗口不会显示其他文件然后是 PDF 吗？验证看起来像是通过了 DOC 和 DOCX。 data-filesize="5000" accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/rtf" />
@Daniel 这是因为文件输入的accept 属性。我刚刚使用自定义文件类型验证更新了示例。要构建您的自定义验证，请查看此处（“自定义”选项）：1000hz.github.io/bootstrap-validator/#validator-options
jsbin.com/riwajanuxu/1/edit?html,js,output 它按预期工作。唯一的问题是，如果您尝试提交没有附加文件的表单，那么它只会发送表单。没有错误
已修复，我只需验证对象是否存在，如下所示：if ($el[0].files[0] && $el[0].files[0].size > maxKilobytes) { }