javascript - 单击图标打开文件资源管理器

Question

我正在使用 Angular 5 和 Typescript。我需要打开文件资源管理器窗口以在单击图标时添加附件。现在，我知道如何为按钮执行此操作，但不知何故它似乎不适用于图标，也许点击事件绑定(bind)不起作用。请帮忙？

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

在我的组件中:

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

Answer 1

我不确定您的代码是如何编写的，但是您需要将该图标绑定(bind)到一个点击方法，该方法实际上将以编程方式点击处理文件附加的其他 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 
}