jquery-easyui+flask单/多文件上传

在使用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应用已经正确配置了静态文件的服务。在实际部署时，你可能需要设置静态文件的服务和路由。

jquery-easyui+flask单/多文件上传

评论已关闭

推荐阅读