使用Ajax與Flask實現多選下載文件
隨著互聯網的發展，用戶對于網站的體驗要求也越來越高。在網站開發中，有時我們需要實現多文件的下載功能，例如用戶需要下載某個文件夾下的多個文件。本文將介紹如何使用Ajax與Flask來實現多選下載文件的功能。
首先，我們需要在前端界面中顯示所有可選的文件。我們可以使用HTML和JavaScript來實現這個功能。以下是一個示例代碼：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="fileList"></div>
<button onclick="downloadSelectedFiles()">下載選中的文件</button>
<script>
axios.get('/files')
.then(function (response) {
var fileList = response.data;
fileList.forEach(function (file) {
var checkbox = '<input type="checkbox" name="file" value="' + file + '">';
var label = '<label>' + file + '</label>';
var br = '<br>';
var fileItem = '<div>' + checkbox + label + br + '</div>';
document.getElementById('fileList').innerHTML += fileItem;
});
})
.catch(function (error) {
console.log(error);
});
function downloadSelectedFiles() {
var selectedFiles = Array.from(document.querySelectorAll('input[name="file"]:checked')).map(function (checkbox) {
return checkbox.value;
});
window.location.href = '/download?files=' + selectedFiles.join(',');
}
</script>
</body>
</html>上述代碼中，我們使用了axios庫來發起GET請求，獲取服務器上的文件列表。然后，我們遍歷文件列表，動態生成HTML代碼，將文件名顯示在頁面上，并提供一個復選框供用戶選擇。當用戶點擊"下載選中的文件"按鈕時，我們通過JavaScript獲取用戶選擇的文件名，并將其作為參數傳給后端的/download路由。
接下來，我們需要在Flask后端實現響應/download路由的功能。以下是一個示例代碼：
from flask import Flask, request, send_from_directory
app = Flask(__name__)
@app.route('/files')
def get_file_list():
# 假設這里返回了一個文件列表
file_list = ['file1.txt', 'file2.txt', 'file3.txt']
return file_list
@app.route('/download')
def download_files():
files = request.args.get('files').split(',')
# 假設這里的文件都在static目錄下
return send_from_directory('static', filename='file.zip', as_attachment=True)
if __name__ == '__main__':
app.run()上述代碼中，我們在/get_file_list路由中返回文件列表。在/download路由中，我們通過request.args.get('files')獲取了用戶選擇的文件名參數，并使用send_from_directory函數返回一個壓縮包供用戶下載。
綜上所述，使用Ajax與Flask可以方便地實現多選下載文件的功能。通過前端頁面的動態生成與響應后端的路由，用戶可以方便地選擇多個文件并下載。以上僅為一個簡單示例，實際應用中可根據具體需求進行適當調整和擴展。