html自身無法直接讀取本地文件,但可以通過以下方法解決:使用filereader api:使用filereader api的readastext()方法讀取文本文件內(nèi)容。使用xmlhttprequest:使用xmlhttprequest (xhr)向服務(wù)器發(fā)送http請(qǐng)求來讀取本地文件。使用fetch api:使用fetch api發(fā)送http請(qǐng)求,類似于xmlhttprequest,但提供更現(xiàn)代的方式。
如何在 HTML 中讀取本地文本文件
HTML 自身無法直接訪問本地文件系統(tǒng)。但是,我們可以通過以下方法解決這個(gè)問題:
使用 FileReader API
FileReader API 提供了 readAsText() 方法,可用于讀取文本文件內(nèi)容:
<code class="html"><input type="file" id="file-input"><script>
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
const text = e.target.result;
// 使用 text
};
reader.readAsText(file);
});
</script></code>
登錄后復(fù)制
使用 XMLHttpRequest
XMLHttpRequest (XHR) 是一種通過 HTTP 請(qǐng)求與服務(wù)器交互的 API。我們可以使用它來讀取本地文件:
<code class="html"><script>
const request = new XMLHttpRequest();
request.open('GET', 'local-file.txt');
request.onload = () => {
const text = request.responseText;
// 使用 text
};
request.send();
</script></code>
登錄后復(fù)制
使用 Fetch API
Fetch API 是 XHR 的替代方案,提供了一個(gè)更現(xiàn)代的方式來處理 HTTP 請(qǐng)求:
<code class="html"><script>
fetch('local-file.txt')
.then(response => response.text())
.then(text => {
// 使用 text
})
.catch(error => {
// 處理錯(cuò)誤
});
</script></code>
登錄后復(fù)制
注意:由于安全原因,這些方法只能讀取同一來源(域、協(xié)議和端口)的文本文件。






