JavaScript 文件對(duì)象(File)是Web API中的一個(gè)對(duì)象,用于與用戶計(jì)算機(jī)中的文件進(jìn)行交互。可以通過(guò)文件對(duì)象來(lái)讀取、編輯和上傳文件。在Web開(kāi)發(fā)中,文件對(duì)象常常被用于表單文件上傳、本地存儲(chǔ)等方面。
在HTML中,可以通過(guò)input標(biāo)簽的type屬性為file來(lái)創(chuàng)建一個(gè)文件輸入框,讓用戶選擇需要上傳的文件。這時(shí),我們就可以通過(guò)JavaScript來(lái)獲取到選擇的文件,并創(chuàng)建一個(gè)文件對(duì)象。下面是一個(gè)簡(jiǎn)單的例子:
<input type="file" id="file-input"> <script> var input = document.getElementById('file-input'); var file = input.files[0]; console.log(file); </script>
在上面的例子中,我們通過(guò)getElementById方法獲取到了id為file-input的文件輸入框,并通過(guò)其files屬性獲取到了用戶所選擇的文件數(shù)組。由于一個(gè)input標(biāo)簽只能選擇一個(gè)文件,因此我們直接取數(shù)組的第一個(gè)元素,然后將其輸出到控制臺(tái)中。輸出的結(jié)果類似于下面這種形式:
File { name: "example.txt", size: 1024, type: "text/plain", lastModified: 1469067600000, lastModifiedDate: Thu Jul 21 2016 11:20:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) }
通過(guò)文件對(duì)象,我們可以獲取到文件的名字、大小、類型、最后修改時(shí)間等信息,同時(shí)也可以讀取文件內(nèi)容,進(jìn)行編輯和上傳等操作。
下面列舉一些常見(jiàn)的文件對(duì)象的用法:
1. 讀取文件內(nèi)容
var reader = new FileReader(); reader.onload = function(e) { var content = e.target.result; console.log(content); } reader.readAsText(file);
上面的代碼創(chuàng)建了一個(gè)FileReader對(duì)象,并將文件內(nèi)容以文本形式讀取出來(lái)并輸出到控制臺(tái)中。
2. 編輯文件內(nèi)容并保存
var writer = new FileWriter(file); writer.write('hello, world!'); writer.close();
上面的代碼創(chuàng)建了一個(gè)FileWriter對(duì)象,并將文件內(nèi)容修改為“hello, world!”,然后保存并關(guān)閉文件。
3. 文件上傳
var formData = new FormData(); formData.append('file', file); var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload'); xhr.send(formData);
上面的代碼創(chuàng)建了一個(gè)FormData對(duì)象,并通過(guò)append方法將文件添加到表單數(shù)據(jù)中。然后,創(chuàng)建一個(gè)XMLHttpRequest對(duì)象并使用POST方式向服務(wù)器發(fā)送請(qǐng)求,將表單數(shù)據(jù)發(fā)送出去。
JavaScript 文件對(duì)象在Web開(kāi)發(fā)中扮演了很重要的角色,為我們提供了方便、快捷的用戶文件交互方式。在開(kāi)發(fā)過(guò)程中,我們需要熟練掌握文件對(duì)象的用法,并結(jié)合實(shí)際需求進(jìn)行合理的使用。