JavaScript 是一種廣泛使用的編程語言，它可以通過一系列 API 來讀取文本文件并顯示在網頁上。常見的應用場景包括：網頁上傳文件后預覽，從服務器獲取數據并顯示在網頁上等。在本文中，我們將介紹如何在網頁中使用 JavaScript 讀取文本文件并顯示在頁面上。

首先，我們需要一個 HTML input 元素來讓用戶上傳文件。比如：

<input type="file" id="file-input" onchange="handleFileSelect()">

當用戶選擇文件后，我們需要處理文件的內容。因此，我們需要在 JavaScript 中編寫一個函數來讀取文件內容：

function readFileContent(file) {
const reader = new FileReader();
reader.onload = (event) => {
const content = event.target.result;
// do something with the content (e.g. display it in the page)
};
reader.readAsText(file);
}

代碼中我們創建了一個 FileReader 實例，該實例的 onload 屬性是一個回調函數，用來處理文件讀取完畢后的內容。在該回調函數中，我們可以獲取文件的內容，然后通過其他操作來呈現在網頁上。

下面是一個完整的例子，用來讀取用戶選擇的文件，并將內容顯示在網頁上：

function handleFileSelect() {
const fileInput = document.getElementById('file-input');
const file = fileInput.files[0];
readFileContent(file);
}
function readFileContent(file) {
const reader = new FileReader();
reader.onload = (event) => {
const content = event.target.result;
const displayArea = document.getElementById('display-area');
displayArea.innerText = content;
};
reader.readAsText(file);
}

在該例子中，我們通過 handleFileSelect() 函數來獲取用戶選擇的文件，并將該文件傳遞給 readFileContent() 函數進行處理。在 readFileContent() 函數中，我們將文件讀取的結果顯示在 id 為 display-area 的元素中。如果需要讀取其他類型的文件，比如圖片或視頻，可以使用不同的 API（比如 FileReader.readAsDataURL()）來完成相應的操作。

總的來說，使用 JavaScript 讀取文件并顯示在網頁上并不復雜，只需要了解一些基本的 API，并將它們組合起來就可以實現預期的操作。值得注意的是，由于安全性的考慮，瀏覽器并不允許 JavaScript 直接訪問用戶的本地文件系統，因此我們需要借助 input 元素來獲取用戶選擇的文件路徑，然后進一步讀取文件內容。