Question

我使用下面的代码并且功能正常工作但是当我第一次选择文件时，上传文件按钮会缩小。

当我检查我的代码时，我看到了

检查代码：（来自控制台）

<div class="fileinput fileinput-exist" data-provides="fileinput">
  <span class="btn btn-default btn-file" style="margin-right: 1em;">
       <span class="fileinput-new" ng-show="resumeflag==false" ng-hide="resumeflag==true || uploaded==true">Choose File</span>

       <span class="fileinput-exist" ng-show="resumeflag==true" ng-hide="getFile==true || resumeflag==false">Update Resume</span>

      <input type="hidden" value name/>

       <input class="form-control" type="file" file-model="resume"/>
  </span>                          
  <span class="fileinput-filename"><input readonly class="name" placeholder="No file choosen"/></span>

</div>

实际代码：

<div class="fileinput fileinput-exist" data-provides="fileinput">
  <span class="btn btn-default btn-file" style="margin-right: 1em;">
       <span class="fileinput-new" ng-show="resumeflag==false" ng-hide="resumeflag==true || uploaded==true">Choose File</span>

       <span class="fileinput-exist" ng-show="resumeflag==true" ng-hide="getFile==true || resumeflag==false">Update Resume</span>

       <input class="form-control" type="file" file-model="resume"/>
  </span>                          
  <span class="fileinput-filename"><input readonly class="name" placeholder="No file choosen"/></span>

</div>

我不知道为什么会改为“fileinput fileinput-exists”而不是“fileinput fileinput-exist”。

Answer 1

没有办法改变input[type=file]的默认行为。有一个插件可以帮助您实现

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js"></script>
<link href="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css" rel="stylesheet"/>
<link href="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

<div class="fileinput fileinput-new" data-provides="fileinput">
  <span class="btn btn-default btn-file">
       <span class="fileinput-new">Upload File</span>
       <span class="fileinput-exists">Change File</span>
       <input class="form-control" type="file" file-model="resume" ng-disabled="profileFilled==false;" />
  </span>
  <span class="fileinput-filename"></span>
  <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
</div>

在Angularjs中将默认的“选择文件”名称更改为具有相同功能的“上传文件”？

1 个答案: