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

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

使用a <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
• 将 -event添加click到您的范围，然后单击您的隐藏输入
• 将change-event 添加到文件输入以处理模板内的文件