jquery 引导验证程序无法处理文件输入

ddrv8njm  于 2023-03-17  发布在  jQuery
关注(0)|答案(2)|浏览(102)

我有一个表单域,它只能接受特定文件大小的.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!'
                }
            }
        }
    }
});
kokeuurv

kokeuurv1#

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

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

参见:http://formvalidation.io/validators/file/
最好的问候,thosimo

mrfwxfqh

mrfwxfqh2#

你失踪了
非空:{消息:'此字段不能为空。' }
所以你的代码应该是

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!'
         }},

希望这能成功。

相关问题