Angular IE11文件上传取消事件

Question

我们有一个应用程序需要支持 IE11 的文件上传功能。 angular 的版本是 Angular 11.

有文件上传控件，它在所有浏览器中都可以正常工作，除了 IE11 我们在文件对话框的取消按钮方面遇到问题。

<input #fileUploadCtrl class="form-control" type="file" (change)="onFileChange($event)"

基本上当用户点击“取消”按钮时，已经选择的文件必须从输入控件中清除。仅当用户选择一个文件并单击“打开”按钮时，更改事件才有效。但是，单击“取消”按钮时不会触发更改事件。

我们如何捕获“取消”事件并清除 Angular 中的文件输入控件？如果没有，是否有任何解决方法可以在用户单击“取消”按钮时清除文件上传？

Answer 1

和myjscoffee的评论一样，检测不到cancel事件。 IE 11 中的文件 <input> 是只读的，所以你不能像你想的那样清除它。它是在 IE 中设计的。也可以参考this thread.

您可以在 IE 中清除输入文件的唯一方法是添加重置 <button> 并在您单击该按钮时清除文件 <input>。您可以参考以下代码片段：

app.component.html:

<input #fileUploadCtrl type="file">
<button type="button" (click)="reset(fileUploadCtrl)">Reset</button>

app.component.ts:

reset(element) {
    element.value = "";
}

Angular IE11 file upload Cancel event