Javascript Bootstrap3文件输入

我正在使用下面的Bootstrap3HTML

          <form action="#" role="form">
                        <div class="form-group">
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new thumbnail" style="width: 200px; height: 60px;">
                                    <img id="logothumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" /> </div>
                                <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 60px;"> </div>
                                <div>
                                    <span class="btn default btn-file">
                                        <span class="fileinput-new"> Select image </span>
                                        <span class="fileinput-exists"> Change </span>
                                        <input type="file" name="..."  id="logo" 
                                            > </span>
                                    <a href="#" class="btn default fileinput-exists" data-dismiss="fileinput"> Remove </a>
                                </div>
                            </div>

                        </div>
                        <div class="margin-top-10">
                            <a href="#" class="btn green-haze" ng-click="file_changed()"> Upload </a>
                            <a href="#" class="btn default"> Cancel </a>
                        </div>
         </form>    

问题是，文件上载控件显示“选择图像”，即使有 存在的文件，即从img src中的数据库显示的文件。它应该显示“更改”-“删除”选项。我怎样才能让它做到这一点呢。但是，当第一次选择文件时，它会执行此操作

---

谢谢

如果我理解正确，您的页面加载时将显示一个图像。但是，您只希望“更改”和“删除”可见，而“选择图像”隐藏。要做到这一点，您只需在页面加载时隐藏包含“选择图像”的范围

$('span.fileinput-new').hide();

现在您有了活动页面。如果删除了默认图像，我假设您希望隐藏“更改”和“删除”，然后再次显示“选择图像”。在这种情况下，您可以在文件输入上设置一个事件，并根据当前是否上载了文件来切换这些事件

$('#logo').on('change', function() {
    // If a file is uploaded - hide "Select Image" and show "Change - Remove"
    if($(this).val().length) {
      $('span.fileinput-new').hide();
      $('span.fileinput-exists, a.fileinput-exists').show();
    // If a file is not uploaded - show "Select Image" and hide "Change - Remove"
    } else {
      $('span.fileinput-new').show();
      $('span.fileinput-exists, a.fileinput-exists').hide();
    }
});

编辑-我玩了一段时间，并编写了一个JSFIDLE，我认为它将帮助您解决问题

---

如果我理解正确，在加载页面时，您将看到一个图像。但是，您只希望“更改”和“删除”可见，而“选择图像”隐藏。要做到这一点，您只需在页面加载时隐藏包含“选择图像”的范围

$('span.fileinput-new').hide();

现在您有了活动页面。如果删除了默认图像，我假设您希望隐藏“更改”和“删除”，然后再次显示“选择图像”。在这种情况下，您可以在文件输入上设置一个事件，并根据当前是否上载了文件来切换这些事件

$('#logo').on('change', function() {
    // If a file is uploaded - hide "Select Image" and show "Change - Remove"
    if($(this).val().length) {
      $('span.fileinput-new').hide();
      $('span.fileinput-exists, a.fileinput-exists').show();
    // If a file is not uploaded - show "Select Image" and hide "Change - Remove"
    } else {
      $('span.fileinput-new').show();
      $('span.fileinput-exists, a.fileinput-exists').hide();
    }
});

编辑-我玩了一段时间，并编写了一个JSFIDLE，我认为它将帮助您解决问题

---

没问题，很乐意帮忙！没问题，很乐意帮忙！