单击图标打开文件资源管理器 [英] Opening file explorer on click of icon
问题描述
我正在将Angular 5与Typescript一起使用.我需要打开文件浏览器窗口,以在单击图标时添加附件.现在,我知道如何为按钮执行此操作,但是某种程度上它似乎不适用于图标,也许单击事件绑定不起作用.请帮忙吗?
I am using Angular 5 with Typescript. I need to open the file explorer window to add an attachment on clicking an icon. Now, i know how to do this for a button but somehow it does not seem to be working for icon, maybe the click event binding is not working. A little help please?
<input type="file" #file (change)="upload()"/>
<span class="icon-doc" (click)="file.click()">
</span>
在我的组件中:
upload(){
//The functionality to upload file(s)
}
推荐答案
我不确定代码的编写方式如何,但是您需要将该图标绑定到click方法,该方法实际上将以编程方式单击其他 input
元素.这是您可以做到的一种方法:
I am not sure how exactly your code is written, but you will need to bind that icon to a click method, which will actually programatically click the other input
element that handles the attaching of files. This is one way you can do it:
<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隐藏输入按钮:
You will probably want to hide the input button using CSS:
.hidden {
visibility: hidden;
width: 1px;
height: 1px;
}
在您的component.ts上,
And on your component.ts,
handleClick() {
document.getElementById('upload-file').click();
}
addAttachment(fileInput: any) {
const fileReaded = fileInput.target.files[0];
// handle the rest
}
这篇关于单击图标打开文件资源管理器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!