Question

我有一个用Angular编写的项目，我想设置输入类型文件的样式。因此，在Internet上，我找到了必须隐藏输入类型文件并以编程方式调用其事件的解决方案。但是下面的代码不起作用：

   <input type="button" id="addImgFile" value="Add file" 
onclick="var addImgFile = document.getElementById('addImgFile'); var event = new Event('change'); addImgFile.dispatchEvent(event);" />
    <input type="file" name="avatar" id="addImgFile" style="display:none;" 
(change)="onFileChange($event)" />

Answer 1

您可以使用input来获得所需的风格，而不是使用其他label。 Here is an example

Answer 2

不清楚要实现什么，但是如果您只想在开始时隐藏输入字段并仅在单击“添加文件”按钮时显示它，则可以尝试按以下代码更改按钮的事件。

<input type="button" id="addImgFile" value="Add file" onclick="var addImgFile = document.getElementById('addImgFile1'); var event = new Event('change'); addImgFile.dispatchEvent(event);" />

<input type="file" name="avatar"  id="addImgFile1" style="display:none;" onchange=" event.target.style=''; event.target.click()" />

Answer 3

在Angular中，应该使用ViewChild属性dectorator来访问元素。然后，您可以从打字稿文件中手动执行所需的任何方法。这是一个基本示例：https://stackblitz.com/edit/angular-nfdvsr

Answer 4

<input type="button" id="addImgFile" value="Add file" (click)="onAddFile()" />
<input #file type="file" name="avatar" id="addImgFile" style="display:none;" 
(change)="onFileChange($event)" />

@ViewChild('file', { static: true })
private file: ElementRef;

onAddFile() {
   // manually click the file element
   this.file.nativeElement.value = null;
   this.file.nativeElement.click();
}

以编程方式在输入类型文件上触发onchange事件

4 个答案: