Jasny Bootstrap - 隐藏提交按钮,直到选中文件

Question

我正在使用带有Jasny前叉的 Bootstrap .我正在处理用户可以上传图像的表单.我想隐藏表单的提交按钮,直到用户实际选择了图像.理想情况下,当用户从表单中删除文件时,提交按钮也应该消失.这是我第一次真正使用这个fork.我该怎么办？

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

Answer 1

您必须向输入字段添加事件侦听器并侦听更改事件.然后,您必须检查事件目标是否为用户选择的文件.我修改了你的代码,在输入字段中添加了一个id,上传按钮在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();
    }
});?

Answer 2

所选答案有效,但您也可以使用Jasny的内置事件:'change.bs.fileinput'如下所示:

$('.fileupload').on('change.bs.fileinput', function() {
   $(this).find('.btn').show();
});