Angular IE11文件上傳取消事件

Question

我們有一個應用程序需要支持 IE11 的文件上傳功能。 angular的版本是Angular 11。

有文件上傳控件，它在除 IE11 之外的所有瀏覽器中都可以正常工作，我們在文件對話框的“取消”按鈕上遇到問題。

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

基本上，當用戶單擊“取消”按鈕時，必須從輸入控件中清除已選擇的文件。 僅當用戶選擇文件並單擊“打開”按鈕時，更改事件才有效。 但是，單擊“取消”按鈕時不會觸發更改事件。

我們如何捕獲“取消”事件並清除 Angular 中的文件輸入控件“？如果沒有，當用戶單擊“取消”按鈕時，是否有任何解決方法可以清除文件上傳？

Answer 1

就像 myjscoffee 的評論一樣，無法檢測到取消事件。 IE 11 中的文件<input>是只讀的，所以你不能像你想的那樣清除它。 這是 IE 設計的。 你也可以參考這個線程。

在 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 = "";
}