javascript - Bootstrap3文件输入

Question

我正在使用以下 bootstrap 3 html

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

我有一些 JavaScript 代码来上传文件，并在首次加载代码时显示数据库中的现有文件。

         var fileUploadControl = $("#logo")[0];
          if (fileUploadControl.files.length > 0) {
             var file = fileUploadControl.files[0];

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

谢谢

Answer 1

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

$('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();
    }
});

编辑 - 我玩了一会儿，并组装了一个 JSFiddle，我认为它会对您有所帮助。

Check it out here