元素是用于在網頁上選擇文件的常見方法。然而，在以傳統方式提交表單的基本網頁中，實時預覽和上傳文件會變得很復雜。這就是我們今天要討論的問題。通過使用 AJAX（Asynchronous JavaScript and XML）技術，我們可以實現無刷新上傳文件并顯示實時預覽的功能。本文將介紹如何使用 AJAX 直接從前端將文件上傳到服務器，并展示一些實用的案例。

為了開始使用 AJAX 文件上傳功能，我們需要一個包含文件 input 元素的表單。這個元素可以讓用戶選擇本地計算機上的文件進行上傳。在這里，我們可以使用一些 CSS 樣式來美化它，例如按鈕樣式或拖放區域。

<form enctype="multipart/form-data"><input type="file" id="fileInput"><button onclick="uploadFile()">上傳</button></form>

一旦用戶選擇了要上傳的文件，我們可以使用 JavaScript 來捕獲該文件。下面的例子展示了如何在文件選擇后實時預覽圖片：

function previewFile() {
var fileInput = document.getElementById('fileInput');
var fileToPreview = fileInput.files[0];
var reader = new FileReader();
reader.onloadend = function() {
var previewImg = document.getElementById('previewImg');
previewImg.src = reader.result;
}
reader.readAsDataURL(fileToPreview);
}

在這個例子中，我們首先獲取了文件 input 的 DOM 元素。然后，我們使用 FileReader 對象來讀取文件，并將內容轉換為 data URL。最后，我們將 data URL 分配給一個具有相應 id 的圖像元素的 src 屬性，從而實現了實時預覽的效果。

在捕獲用戶選擇的文件并進行實時預覽后，我們需要將文件上傳到服務器。為了實現這一目標，我們需要創建一個 AJAX 請求，將文件作為表單數據發送給服務器。

function uploadFile() {
var fileInput = document.getElementById('fileInput');
var fileToUpload = fileInput.files[0];
var formData = new FormData();
formData.append('file', fileToUpload);
var ajax = new XMLHttpRequest();
ajax.open('POST', 'upload.php', true);
ajax.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert('文件上傳成功！');
}
};
ajax.send(formData);
}

在這里，我們首先創建了一個 FormData 對象，并將要上傳的文件附加到 formData 中。然后，我們創建了一個 XMLHttpRequest 對象并打開了 POST 請求連接。如果請求成功完成，我們將看到一個成功的提示。

接下來，我們需要創建處理文件上傳的服務器端代碼。在這里，我們只提供一個簡單的示例，用于演示如何在 PHP 中處理文件上傳。在 upload.php 文件中，我們可以使用 $_FILES 數組來訪問上傳的文件：

<?php
$targetDirectory = "uploads/";
$targetFile = $targetDirectory . basename($_FILES["file"]["name"]);
if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
echo "文件上傳成功！";
} else {
echo "文件上傳失??！";
}
?>

在這個例子中，我們首先指定了上傳文件的目標目錄。然后，我們使用 move_uploaded_file() 函數將臨時文件移動到目標目錄中，并根據成功與否顯示相應的提示。

總結而言，通過使用 AJAX 文件上傳技術，我們可以實現實時預覽和無刷新上傳文件的功能。無論是在社交媒體平臺上的頭像上傳，還是在電子商務網站上的產品圖片上傳，都可以通過這種技術提供更好的用戶體驗。我們可以根據具體需求對上傳文件的類型、大小等進行驗證，并在后端對文件進行處理和保存。