Jasny Bootstrap - 隐藏提交按钮，直到选择文件答案

【问题标题】：Jasny Bootstrap - Hide submit button until file selectedJasny Bootstrap - 隐藏提交按钮，直到选择文件
【发布时间】：2012-12-05 23:50:49
【问题描述】：

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

<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

【解决方案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();
    }
});

【讨论】：

啊！太好了，我一直在思考如何更改实际的 Jasny 代码。但这要简单得多。谢谢！

【解决方案2】：

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

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

【讨论】：

比接受的答案更好。使用 jasny 的内置事件 change.bs.fileinput 是更好的选择！

【解决方案3】：

只需在提交按钮上使用内置类“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>

【讨论】：

【解决方案4】：

只需将“fileupload-exists”添加到提交按钮类..

【讨论】：