Jasny Bootstrap - скрыть кнопку отправки, пока не будет выбран файл

Я использую Bootstrap с форком Jasny. Я работаю над формой, в которой пользователи могут загружать изображения. Я хочу скрыть кнопку отправки формы, пока пользователь не выберет изображение. В идеале кнопка отправки также должна исчезать, когда пользователь удаляет файл из формы. Это первый раз, когда я действительно использовал эту вилку. Как бы я это сделал?

<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="fileupload-new thumbnail" style="width: 114px; height: 64px;"><img src="http://www.placehold.it/114x64/EFEFEF/AAAAAA" /></div>
  <div class="fileupload-preview fileupload-exists thumbnail" style="width: 114px; height: 64px;"></div>
  <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
  <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  <button type="submit" class="btn btn-primary">Upload</button>
</div>

javascript jquery twitter-bootstrap jasny-bootstrap
person Krystian    schedule 05.12.2012    source источник

Ответы (4)


arrow_upward
5
arrow_downward

вам нужно добавить прослушиватель событий в поле ввода и прослушивать событие изменения. Затем вы должны проверить, является ли цель события файлом, выбранным пользователем. Я изменил ваш код, чтобы добавить идентификатор в поле ввода, и кнопка загрузки проверяет его на http://jsfiddle.net/LLfjE/

$('#file-input').on('change', function(evt) {
    var file = evt.target.files[0];
    if (file){
        $('#upload-btn').show();
    } else {
        $('#upload-btn').hide();
    }
});​
person jxs    schedule 06.12.2012
comment
Ах! Отлично, я застрял, думая, как изменить настоящий код Jasny. Но это намного проще. Спасибо! - person Krystian; 06.12.2012

arrow_upward
5
arrow_downward

Выбранный ответ работает, но вы также можете использовать для этого встроенные события Jasny: 'change.bs.fileinput', например:

$('.fileupload').on('change.bs.fileinput', function() {
   $(this).find('.btn').show();
});
person parrker9    schedule 08.12.2013
comment
Лучше, чем принятый ответ. лучше использовать встроенное в jasny событие change.bs.fileinput! - person TheByeByeMan; 10.09.2015

arrow_upward
2
arrow_downward

Просто используйте встроенный класс «fileupload-exists» на кнопке отправки. Это должно сделать кнопку скрытой, пока файл не будет выбран.

<div class="fileupload fileupload-new" 
    data-provides="fileupload" 
    data-uploadtype="file">

<button type="submit" class="btn fileupload-exists">
<i class="icon-arrow-up"></i> Upload File</button>
person Fate    schedule 16.04.2013

arrow_upward
1
arrow_downward

Просто добавьте «fileupload-exists» в класс кнопки отправки.

person King    schedule 29.08.2013