Question

我想自定义input type file按钮。为此，我将其放在span内并将其visibility设置为hidden。

     <span class="btn btn-default" flow-btn>
        Please choose a file
      <input type="file"style="visibility: hidden; position: absolute;"></span>

我的问题是，当我点击跨度时，没有任何反应，但是当我从visibility: hidden中删除style时，会显示选择文件弹出窗口。

我怎样才能得到与input type="file"相同的结果，即使它被隐藏了？

  <span class="btn btn-default" flow-btn>
        Please choose a file
      <input type="file"style="visibility: hidden; position: absolute;"></span>

Answer 1

使用<label>代替<span>，其中“for”属性定位<input>。

 <label for="file-input" class="btn btn-default" flow-btn>
    Please choose a file
  <input id="file-input" type="file"style="visibility: hidden; position: absolute;"></label>

Answer 2

以角度方式做到：

<span class="btn btn-default" flow-btn (click)="fInput.click()">Please choose a file</span>
<input #fInput type="file"style="visibility: hidden; position: absolute;" (change)="onFilesAdded($event)">

为您隐藏的输入fInput
将click - 事件添加到您的范围，然后点击隐藏的输入
将change - 事件添加到您的文件输入中以处理模板内的文件

Answer 3

<span class="btn btn-default" flow-btn>
        Please choose a file
      <input type="file"style="display: none;"></span>

将显示设置为none（隐藏它并且不为其保留空间）你不会需要定位

输入类型文件如果隐藏则不起作用

3 个答案: