在現代Web開發中，Ajax（Asynchronous JavaScript and XML）已經成為一種常見的技術手段。它能夠通過JavaScript異步地向服務器發送請求，從而實現頁面的無刷新更新和動態內容的加載。而Flask作為一種輕量級的Python Web框架，能夠快速構建Web應用程序。本文將介紹如何使用Ajax向Flask發送文件，并結合具體的示例進行說明。 在許多Web應用中，我們經常遇到需要上傳文件的需求，比如圖片、文檔等。而傳統的方式是通過表單提交來實現文件的上傳。但是對于需要實現無刷新更新和動態顯示上傳進度的功能時，傳統的表單提交方式就顯得不太方便了。這時候，Ajax可以派上用場。我們可以使用Ajax來將文件異步地發送給Flask服務器，從而實現實時的上傳進度顯示和交互效果。 假設我們想要實現一個簡單的圖片上傳功能，用戶可以選擇圖片文件并將其上傳到服務器。首先，我們需要在前端頁面上添加一個文件選擇框和一個上傳按鈕：

<input type="file" id="file-input">
<button id="upload-button">上傳</button>

接下來，我們需要編寫JavaScript代碼來處理文件的選擇和上傳操作。首先，我們需要監聽選擇框的change事件，在用戶選擇文件后獲取到文件對象：

var fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', function() {
var file = fileInput.files[0];
// TODO: 處理文件
});

在獲取到文件對象后，我們可以使用FormData對象來構建要上傳的數據。通過append方法，我們可以將文件對象添加到FormData中：

var formData = new FormData();
formData.append('file', file);

然后，我們可以使用XMLHttpRequest對象來創建一個Ajax請求，并將FormData作為請求體發送給Flask服務器：

var request = new XMLHttpRequest();
request.open('POST', '/upload');
request.send(formData);

在Flask服務器端，我們可以使用Flask的request對象來接收前端發送的文件。我們需要為上傳文件的路由添加一個POST方法，并使用request對象的files屬性來獲取到上傳的文件。最后，我們可以將文件保存到指定的路徑，并返回一個上傳成功的響應：

from flask import request
@app.route('/upload', methods=['POST'])
def upload():
file = request.files['file']
if file:
# 保存文件到指定路徑
file.save('uploads/' + file.filename)
return '上傳成功'
else:
return '上傳失敗'

通過以上的代碼，我們實現了通過Ajax向Flask發送文件并保存到服務器的功能。當用戶選擇完文件后，點擊上傳按鈕，文件將以Ajax方式被發送到Flask服務器進行處理。服務器將根據文件的內容，保存到指定的路徑，并返回一個上傳成功的響應。這個過程中，頁面不會刷新，用戶將實時看到上傳進度和上傳結果。 綜上所述，通過使用Ajax向Flask發送文件，我們可以實現頁面的無刷新更新和動態顯示上傳進度的功能。這種方式極大地方便了用戶的操作，并提升了用戶體驗。希望本文能夠對你理解和應用Ajax向Flask發送文件有所幫助。