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

Bootstrap3文件输入

1 个答案: