文件上傳回顯是一種非常常見的操作，它允許用戶將本地文件上傳到服務器并在頁面上顯示上傳的文件內容或信息。在 JavaScript 中實現文件上傳回顯非常簡單，只需要幾行代碼即可完成這一功能。

當用戶選擇文件上傳時，我們可以使用 FileReader 對象來讀取文件內容并在頁面上呈現。以下是一個基本的示例，演示了如何實現文件上傳回顯。

<input type="file" id="myfile"><p id="filecontent"></p><script>var fileInput = document.getElementById("myfile");
fileInput.addEventListener("change", function (event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var fileContent = e.target.result;
var contentElem = document.getElementById("filecontent");
contentElem.innerHTML = fileContent;
};
reader.readAsText(file);
});
</script>

上面的代碼中，我們在 input 元素中添加了一個 type="file" 屬性，這樣就可以讓用戶選擇文件。然后，我們在 JavaScript 中將選擇的文件讀取為文本，并將其內容顯示在頁面上。

在某些情況下，我們可能還需要上傳文件到服務器并在頁面上顯示已上傳文件的信息。為了實現這一目的，我們可以使用 XMLHttpRequest 對象通過 AJAX 將文件上傳到服務器。以下是一個示例，演示了如何使用 AJAX 上傳文件并在頁面上顯示已上傳文件的信息。

<form enctype="multipart/form-data" method="post"><input type="file" name="myfile"><input type="button" value="Upload" onclick="uploadFile()"></form><div id="uploadedfile"></div><script>function uploadFile() {
var fileInput = document.querySelector('input[type="file"]');
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var uploadedFile = document.getElementById("uploadedfile");
uploadedFile.textContent = xhr.responseText;
}
};
var formData = new FormData();
formData.append('myfile', fileInput.files[0]);
xhr.send(formData);
}
</script>

在上面的示例中，我們添加了一個上傳文件的表單。當用戶點擊“Upload”按鈕時，uploadFile() 函數將被觸發。這個函數使用 XMLHttpRequest 對象創建了一個 POST 請求，并將選定的文件作為 FormData 對象附加到請求中。最后，服務器將處理該請求并返回上傳文件的 URL，該 URL 將被存儲在頁面上的 uploadedfile 元素中。

綜上所述，使用 JavaScript 實現文件上傳回顯非常簡單。無論是在客戶端還是在服務器端，我們都可以使用少量的代碼完成這一任務。隨著 Web 應用程序變得越來越復雜，文件上傳回顯也將成為 Web 開發中不可或缺的一部分。