Ajax上傳文件是一種在不重新加載頁(yè)面的情況下，使用JavaScript和XMLHttpRequest對(duì)象上傳文件的技術(shù)。
下面是一個(gè)簡(jiǎn)單的HTML代碼示例，用于演示如何通過(guò)Ajax上傳文件：
<!DOCTYPE html>
<html>
<head>
<title>Ajax上傳文件示例</title>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$('#upload_btn').click(function(){
var file_data = $('#file_input').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url: 'upload.php', // 上傳文件的PHP腳本
type: 'POST',
data: form_data,
contentType: false,
processData: false,
success: function(data){
alert(data); // 文件上傳成功后的返回信息
}
});
});
});
</script>
</head>
<body>
<input type="file" id="file_input">
<button id="upload_btn">上傳文件</button>
</body>
</html>在上面的代碼中，我們使用jQuery將點(diǎn)擊事件綁定到上傳按鈕"upload_btn"上。當(dāng)點(diǎn)擊按鈕時(shí)，我們首先通過(guò)$("#file_input").prop("files")[0]獲取文件對(duì)象，然后將其添加到一個(gè)新創(chuàng)建的FormData對(duì)象中。接下來(lái)，我們使用jQuery的$.ajax()函數(shù)將FormData對(duì)象上傳到一個(gè)PHP腳本中的URL地址。該腳本接收FormData對(duì)象，將文件保存在服務(wù)器上，并返回文件上傳成功的消息。
需要注意的是，我們必須設(shè)置"contentType"和"processData"屬性為false，以告訴jQuery不要將FormData對(duì)象轉(zhuǎn)換為查詢字符串。通過(guò)這種方法，我們可以通過(guò)Ajax上傳包含二進(jìn)制數(shù)據(jù)（如圖像、PDF文件等）的文件。此外，我們還需要添加一個(gè)元素以允許用戶選擇要上傳的文件。