Как использовать валидатор Bootstrap для проверки размера и типа файла

Я использую валидатор Bootstrap (Validator plugin), чтобы подтвердить свою форму, но у меня есть вход для файлов, которые я хотел бы получить, для выборочной проверки типов файлов и файлов (pdf , DOCX, док ..).Как использовать валидатор Bootstrap для проверки размера и типа файла

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

мне нужны некоторые указания о том, как я должен использовать этот плагин для того, чтобы подтвердить ввод на моем веб-интерфейсе до бэкенд ведет свою собственную проверку.

источник

2016-09-14 Daniel

Ссылка вы дали сломана – Ish

@Ish Фиксированный его. Спасибо! – Daniel

@ Daniel Я переключаюсь на [этот плагин] (http://parsleyjs.org), для меня он подходит лучше. Если вам нравится, вот пример пользовательских проверок: http://parsleyjs.org/doc/examples/customvalidator.html – Victor

Пример извлечена из: 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>

источник

2016-09-14 11:12:39 Victor

Хороший пример. У вас есть идея, почему при попытке выбрать файл в окне не будут отображаться другие файлы, кроме файлов PDF? Валидация выглядит так, как будто она проходит DOC и DOCX. 'data-filesize =" 5000 "accept =" application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/rtf "/>' – Daniel

@ Даниэль это из-за атрибута 'accept' вход файла. Я просто обновил пример с помощью проверки пользовательского типа файла. Чтобы создать свои пользовательские проверки, посмотрите здесь (опция «custom»): http://1000hz.github.io/bootstrap-validator/#validator-options – Victor

http://jsbin.com/riwajanuxu/1/edit?html , js, output Работает по назначению. Единственная проблема заключается в том, что если вы попытаетесь отправить эту форму без прикрепленного файла, она просто отправит форму. Без ошибок – Daniel

Как использовать валидатор Bootstrap для проверки размера и типа файла

ответ

Смежные вопросы