logo标签列表

使用Bootstrap验证器验证文件大小和文件类型的方法

jquerytwitter-bootstrapvalidation
3

我正在使用Bootstrap验证器（验证插件）来验证我的表单，但是我有一个用于文件的输入框，我希望对文件类型和文件大小（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
@Ish 已经修复了。谢谢！ - Daniel
@Daniel，我换用了这个插件，对我来说更适合。如果你需要，这里有一个自定义验证的示例：http://parsleyjs.org/doc/examples/customvalidator.html - Victor
2个回答
2

这里的代码对我很有用：

最初的回答：

<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>
0

示例提取自：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
您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Victor
http://jsbin.com/riwajanuxu/1/edit?html,js,output 它按预期工作。唯一的问题是，如果您尝试提交此表单但未附加文件，则它将只发送表单，而不会出现错误。 - Daniel
我已经解决了，我只需要像这样验证对象是否存在：if ($el[0].files[0] && $el[0].files[0].size > maxKilobytes) { } - Daniel
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接