文件上傳的角度2（更改）

我正在使用Angular 2（更改）來檢測上載的文件並觸發該功能。但是當我試圖再次上傳同一文件時，我遇到了問題，因爲文件沒有變化，（更改）未觸發。請在這種情況下建議事件綁定。文件上傳的角度2（更改）

<input type="file" name="file" id="fileupload" (change)="onChange($event)"/>

是否有任何方法將類型文件的輸入值重置爲空。

來源

2016-08-26 Developer

您可以作爲ViewChild訪問文件輸入並從中獲取文件。

import { Component, ViewChild, ElementRef} '@angular/core'; 
@Component({ 
//... 
template: ` 
    <input #fileInput type='file' (change)="fileChanged($event)"> 
` 
//... 
}) 
export class FileInputComponent { 
    @ViewChild('fileInput') myFileInput: ElementRef; 

    getFileLater() { 
    console.log(this.myFileInput.nativeElement.files[0]); 
    } 

    fileChanged(event) { 
    console.log(event.target.files[0]); 
    } 
}

.files[]上nativeElement始終是一個陣列，即使只有一個選定的文件（或無，就此而言）。它會爲您提供文件對象，就像您從(change)事件中訪問event.target.files一樣，因此您可以在事後處理它們。

應該提到的是，當在文件輸入中選擇文件並且觸發了更改事件時，該文件實際上並未在任何地方「上傳」。它只是傳遞給瀏覽器一個引用（與其他一些元數據），客戶端可以使用它。實際上傳文件是你必須單獨編程的東西。

UPDATE：

爲了選擇以前選擇了一個文件，文件輸入已通過每當瀏覽按鈕是清除其值復位時，強制文件輸入，甚至觸發更改事件點擊。既然你已經在使用jQuery，你可以這樣做：$('#fileupload').val("");。

See my forked Plunker作爲一個工作示例。

來源

2016-08-26 20:22:34 ABabin

如果我第二次瀏覽同一文件，因爲元素中沒有任何內容發生變化，（更改）將如何檢測它。 – Developer

對不起，但我不明白你在問什麼。只有更改事件** **在用戶選擇/更改文件輸入時觸發。如果您希望從文件輸入中選擇的文件與更改事件分開，您必須訪問文件輸入元素的'files []'數組，正如我在示例的getFileLater（）函數中所示。 – ABabin

我使用change事件觸發我的函數。我瀏覽一個文件，然後更改文件的數據。當我再次瀏覽同一個文件時，該功能不會被更改事件觸發，因爲它是相同的文件。 – Developer

文件上傳的角度2（更改）

回答

相關問題