flask----jquery+ajax上传文件

最新推荐文章于 2021-08-05 19:25:09 发布

xingba9363

最新推荐文章于 2021-08-05 19:25:09 发布

阅读量316

点赞数

CC 4.0 BY-SA版权

分类专栏： flask

本文链接：https://blog.youkuaiyun.com/weixin_43640375/article/details/107946000

flask 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用Flask作为后端，jQuery和AJAX实现前端文件选择和上传功能的示例。通过HTML表单和JavaScript，用户可以预览所选文件并触发上传过程，所有操作都在不刷新页面的情况下完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flask+jquery+ajax上传文件

html

<form id="form1" action="/upload_file" enctype='multipart/form-data' method='POST'>
    <input id="upload_file" type="file" name="file">
    <label id="filename"></label>
</form>
<button onclick="uploadFile()">上传</button>

$("#upload_file").change(function () {
    var arrs = $(this).val().split('\\');
    var filename = arrs[arrs.length - 1];
    console.log($(this).val())
    $("#filename").html(filename);
});

function uploadFile() {
    var formData = new FormData($("#form1")[0])
    $.ajax({
        url: "/upload_file",
        type: 'post',
        async:true,
        cashe:false,
        processData: false,
        contentType: false,
        data: formData,
        success: function (data) {
            console.log(data.data)
        }
    })
}

flask

@app.route("/upload_file", methods=["GET", "POST"])
def upload_file():
    file = request.files['file']
    file_name = file.filename
    basepath = os.path.dirname(__file__)  # 当前文件所在路径
    upload_path = os.path.join(basepath, 'static', file_name)  
    file.save(upload_path)
    return jsonify({"status": 200, "data": "上传成功"})