Bootstrap Validator無法處理文件輸入

我有一個表單域，應該只接受某個文件大小的.jpg或.png圖像。驗證似乎沒有工作（用無效的文件類型進行測試）。這是我到目前爲止，所以我錯過了什麼？我應該像它在這裏http://bootstrapvalidator.com/validators/file/Bootstrap Validator無法處理文件輸入

的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!' 
       } 
      } 
     } 
    } 
});

來源

2014-09-24 Matt

在您的小提琴中，您正在使用** v0.4.5 **版本，** minSize **僅在** v0.5.2 **版本中可用。 – Arkni 2014-09-29 16:32:49

我認爲你沒有正確閱讀這個問題的答案http://stackoverflow.com/questions/25649867/how-to-set-minsize-in-bootstrap-validator – Arkni 2014-09-29 16:35:34

只需刪除擴展空間，然後鍵入

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

參見：http://formvalidation.io/validators/file/

最好的問候， thosimo

來源

2015-05-20 12:50:44 thosimo

我已經改變了我處理輸入的方式驗證，只是不允許其他文件類型在文件選擇器中用'accept =「image/jpg，image/png，image/jpeg」 – Matt 2015-05-20 13:55:08

You are missing

notEmpty：{ message：'該字段不能爲空。' }

所以，你的代碼應該是

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

希望這項工作。

來源

2015-09-14 09:45:15 Shiplu

Bootstrap Validator無法處理文件輸入

回答

相關問題