点击图标打开文件资源管理器

Question

我正在使用Angular 5和Typescript。我需要在单击图标时打开文件浏览器窗口以添加附件。现在，我知道如何为按钮执行此操作，但是对于图标，它似乎无法工作，可能是单击事件绑定不起作用。请求帮助。

<input type="file" #file (change)="upload()"/>
<span class="icon-doc" (click)="file.click()">
</span>

在我的组件中：

upload(){
    //The functionality to upload file(s)
}

- Mark

Answer 1

我不确定您的代码是如何编写的，但您需要将该图标绑定到一个点击方法上，该方法会实际上以程序方式单击处理附加文件的另一个input元素。以下是一种可行的方法：

<a (click)="handleClick()" href="javascript:undefined">
  <i class="la la-upload"></i>
</a>

<input class="hidden" type="file" id="upload-file" name="upload-file" accept=".csv" ngf-max-size="2MB" (change)="addAttachment($event)">

您可能希望使用CSS隐藏输入按钮：

.hidden {
  visibility: hidden;
  width: 1px;
  height: 1px;
}

在你的 component.ts 文件中，

handleClick() {
  document.getElementById('upload-file').click();
}

addAttachment(fileInput: any) {
  const fileReaded = fileInput.target.files[0];
  //  handle the rest 
}

- wentjun

---

我想我正在尝试同样的事情。让我检查是否有任何更改。我也没有使用自定义隐藏类。让我尝试看看是否有帮助。 - Mark

谢谢你的回答。我基本上将我的方法与你的方法结合起来，并添加了自定义的隐藏类。效果非常好。不过，你能解释一下为什么简单地添加隐藏属性对我没有起作用吗？ - Mark

嗨，谢谢你的回答。我基本上是将我的方法与你的方法结合起来，并添加了自定义的隐藏类。运行得非常好。但你能解释一下为什么简单地添加隐藏属性对我不起作用吗？ - Mark

@Mark 很高兴能帮忙！那是个好问题。hidden属性实际上类似于使用display:none。hidden属性实际上防止它在DOM上呈现，而visibility:hidden仅使其“不可见”。 - wentjun