File upload 我可以使用带有按钮的ng2文件上载而不是文件输入吗？

我正在使用（单个上载示例），我想使用：

ng2FileSelect

，使用按钮或div代替文件输入。我该怎么做

我想让它做这样的事情：

<button ng2FileSelect [uploader]="uploader">Choose file</button>

选择文件

而不是：

<input type="file" ng2FileSelect [uploader]="uploader" />

---

如果不存在使用的干净方法，您知道替代方法吗？

一种可能的解决方案是利用Angular 2的模板变量，并将模板变量分配给输入元素；完成后，您可以直接从另一个元素（如按钮）调用在该输入上定义的方法

我在我的一份申请中做了以下几点：；它适用于IE11、Firefox和Chrome：

<button (click)="fileInput.click()" class="btn btn-default">Upload</button>
<span style="visibility: hidden; position: absolute; overflow: hidden; width: 0px; height:0px;border:none;margin:0; padding:0">
     <input type="file" #fileInput ng2FileSelect [uploader]="uploader" />
</span>

上传

如您所见，该按钮只是在自己的单击事件中调用#fileInput的单击事件

---

请注意，我将输入隐藏在span中，然后通过一系列样式将span隐藏在视图中，这样只有按钮可见。还要注意的是，将这些样式直接应用于输入元素似乎会在IE11中引起问题。

您可以将

输入[文件]

元素包装为label元素并隐藏它。看到和

这是密码

HTML:

---

通过一种简单的方法，您可以使用标签，只需隐藏输入

上传文件

您找到了实现这一目标的方法吗？好主意！你的例子对我来说是个好榜样。非常感谢。绝妙的解决方案。谢谢

<label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input id="file-upload" type="file"/>

input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}