在使用jquery-easyui
和flask
进行文件上传时,你可以使用easyui
的filebox
组件来选择文件,并使用flask
的request
对象来处理上传的文件。以下是一个简单的例子:
HTML (使用Jinja模板语法):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='jquery-easyui/themes/default/easyui.css') }}">
<script type="text/javascript" src="{{ url_for('static', filename='jquery-easyui/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='jquery-easyui/jquery.easyui.min.js') }}"></script>
</head>
<body>
<input id="file_upload" class="easyui-filebox" style="width:300px" data-options="multiple:true">
<button onclick="uploadFiles()">上传</button>
<script>
function uploadFiles() {
var formData = new FormData();
var files = $('#file_upload').filebox('files');
for (var i = 0; i < files.length; i++) {
formData.append('file' + i, files[i]);
}
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
processData: false, // 不处理发送的数据
contentType: false, // 不设置内容类型
success: function(response) {
console.log(response);
},
error: function() {
console.log('上传失败');
}
});
}
</script>
</body>
</html>
Flask 后端:
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/upload', methods=['POST'])
def upload_file():
files = request.files.getlist('file')
for file in files:
file.save('/path/to/save/files/' + file.filename)
return jsonify({"status": "success", "message": "文件上传成功"})
if __name__ == '__main__':
app.run(debug=True)
在这个例子中,前端页面使用了easyui
的filebox
组件来选择多个文件,然后通过FormData
对象进行封装,发送到/upload
路径。后端flask
应用接收这些文件,并将它们保存到指定的目录。
确保你的flask
应用已经正确配置了静态文件的服务。在实际部署时,你可能需要设置静态文件的服务和路由。