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

Question

我正在使用 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>

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

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