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

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>

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

即使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>而不是带有"for"属性的<span>来定位<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-event 添加到文件输入中以处理模板中的文件

Answer 3

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

将显示设置为"无"(这将隐藏它并且不会为其保留空间) 你也不需要定位