Question

我有一个表单字段，只能接受特定文件大小的.jpg或.png图像。验证似乎不起作用（使用无效的文件类型进行测试）。这是我到目前为止所做的，所以我错过了什么？我应该像在这里一样工作http://bootstrapvalidator.com/validators/file/

jsFiddle：http://jsfiddle.net/933yvfmh/3/

<div class="container-fluid">
    <form id="fileupload">
        <div class="row top">
            <div class="col-md-4"></div>
            <div class="col-md-4 logo">Image Cropper</div>
            <div class="col-md-4"></div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="panel crop">
                    <div class="well">
                        <input type="file" mulitple name="fileupload" class="btn btn-default form-control" id="file" />
                        <button class="btn btn-default" id="reset">Reset</button>
                        <input id="renderButton" type="button" value="Render final image" class="btn btn-primary" />
                    </div>
                    <div class="panel-body">
                        <div id="container" class="well"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 render">
                <div class="panel">
                    <div class="panel-body">
                        <div id="result_container" class="result thumbnail"></div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

//HIDE CONTROLS UNTIL IMAGE SELECTED//
$("#reset, #renderButton, .render").hide();
$("#file").click(function () {
   $("#reset, #renderButton").show();
});
//ONLY SHOW RENDERED VIEW WHEN RENDER BUTTON CLICKED//
$("#renderButton").click(function () {
    $(".render").fadeIn("slow").animate({
        right: '50px'
    });
    $(".render, #result_container").show();
})
//RESET RENDER VIEW//
$("#reset").click(function () {
    $(".imgly-container").empty();
});


$('#fileupload').bootstrapValidator({
    live: 'enabled',
    fields: {
        fileupload: {
            validators: {
                file: {
                    extension: 'jpg, png',
                    type: 'image/jpg, image/png',
                    minSize: 1024 * 1024,
                    message: 'The selected file is not valid, or the size is not large enough!'
                }
            }
        }
    }
});

Answer 1

只需删除扩展中的空格并输入

即可

extension: 'jpg,png',
type: 'image/jpg,image/png',

请参阅：http://formvalidation.io/validators/file/

祝你好运， thosimo

Answer 2

你错过了

notEmpty：{ 消息：'此字段不能为空。' }

所以你的代码应该是

validators: {
     notEmpty: {
         message: 'This field can not be empty.' 
     },

     file: {
         extension: 'jpg, png',
         type: 'image/jpg, image/png',
         minSize: 1024 * 1024,
         message: 'The selected file is not valid, or the size is not large enough!'
         }},

希望这项工作。

Bootstrap Validator无法处理文件输入

2 个答案: