在網(wǎng)頁開發(fā)中,我們經(jīng)常需要從用戶的計算機中獲取文件,例如上傳頭像、上傳文檔等等。那么在HTML中如何獲取文件呢?下面就為大家介紹幾種方法。
put標簽的type屬性為file
put標簽,可以讓用戶選擇本地文件。當type屬性設(shè)置為file時,就可以讓用戶選擇本地文件了。例如:
l>putame="file">putit" value="上傳">>
putame屬性為file。當用戶選擇了本地文件后,這個文件的信息就會被包含在表單中,可以通過提交表單的方式將文件上傳到服務(wù)器。
2. 使用File API
HTML5提供了File API,可以讓我們在客戶端處理文件。通過這個API,我們可以獲取文件的名稱、大小、類型等信息,還可以讀取文件內(nèi)容。例如:
lputput">
<script>putententByIdput');puttListenergection() {put.files[0];soleame);sole.log('文件大小:' + file.size + '字節(jié)');sole.log('文件類型:' + file.type);ew FileReader();
reader.readAsText(file);loadction() {sole.log('文件內(nèi)容:' + reader.result);
}
});
</script>
puttListenerge事件,當用戶選擇文件后,就會觸發(fā)這個事件。在事件處理函數(shù)中,我們首先獲取了用戶選擇的文件,然后通過FileReader對象讀取文件內(nèi)容,并在控制臺中輸出文件的名稱、大小、類型和內(nèi)容。
需要注意的是,使用File API需要瀏覽器支持HTML5,如果用戶使用的是過時的瀏覽器,就無法使用這個API。
以上就是在HTML中獲取文件的兩種方法,第一種方法簡單易用,適用于大多數(shù)情況。而第二種方法則更加靈活,可以讓我們在客戶端處理文件,但需要瀏覽器支持HTML5。在實際開發(fā)中,我們可以根據(jù)具體需求選擇使用哪種方法。