本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 脚本 > python >

收藏
分享到

Flask如何接收前端ajax传来的表单(包含文件)

python 来源：互联网 作者：佚名 发布时间：2023-08-27 22:22:27 人浏览
摘要

Flask接收前端ajax传来的表单 HTML,包含一个text类型文本框和file类型上传文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 !DOCTYPE html html lang=

Flask接收前端ajax传来的表单

HTML,包含一个text类型文本框和file类型上传文件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>拍照</title>

</head>

 

<body>

    <h1>拍照上传演示</h1>

    <form id="upForm" enctype="multipart/form-data" method="POST">

        <p>

            <span>用户名:</span>

            <input type="text" name="username" />

        </p>

        <input name="pic" type="file" accept="image/*" capture="camera" />

        <a onclick="upload()">上传</a>

    </form>

    <img id="image" width="300" height="200" />

</body>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script>

    function upload() {

        var data = new FormData($("#upForm")[0]);   //注意jQuery选择出来的结果是个数组,需要加上[0]获取

        $.ajax({

            url: '/do',

            method: 'POST',

            data: data,

            processData: false,

            contentType: false,

            cache: false,

            success: function (ret) {

                console.log(ret)

            }

        })

      //return false    //表单直接调用的话应该返回false防止二次提交,<form οnsubmit="return upload()">

    }

</script>

 

</html>

Python

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

import os

from flask import Flask, render_template, request, jsonify

from werkzeug import secure_filename

 

TEMPLATES_AUTO_RELOAD = True

 

app = Flask(__name__)

app.config.from_object(__name__)

# 设置Flask jsonify返回中文不转码

app.config['JSON_AS_ASCII'] = False

 

PIC_FOLDER = os.path.join(app.root_path, 'upload_pic')

 

 

@app.route('/', methods=['GET'])

def hello():

    return render_template('index.html')

 

 

@app.route('/do', methods=['POST'])

def do():

    data = request.form

    file = request.files['pic']

    result = {'username': data['username']}

    if file:

        filename = secure_filename(file.filename)

        file.save(os.path.join(PIC_FOLDER, filename))

        result['pic'] = filename

 

    return jsonify(result)

 

 

if __name__ == '__main__':

    app.run(debug=False, host='0.0.0.0', port=8000)

Flask利用ajax进行表单请求和响应

前端html代码

1

2

3

4

<form id="demo_form">

    输入框： <input type="text" name="nick_name" />

    <input type="submit" value="ajax请求"/>

</form>

js代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

//首先需要禁止form表单的action自动提交

$("#demo_form").submit(function(e){

    e.preventDefault();

 

    $.ajax({

        url:"/demo",

        type:'POST',

        data: $(this).serialize(),   // 这个序列化传递很重要

        headers:{

            "X-CSRF-Token": getCookie('csrf_token')

        },

        success:function (resp) {

            // window.location.href = "/admin/page";

            if(resp.error){

                console.log(resp.errmsg);

            }

        }

    })

});

python Flask框架的代码

1

2

3

4

5

@app.route("/demo", methods=["POST"])

def demo():

    nick_name = request.form.get("nick_name")

    print(nick_name)

    return "ok"

表单序列化很重要，否则获取的数据是None。
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
  • PyTorch定义Tensor及索引和切片介绍(最新推荐)
    深度学习--PyTorch定义Tensor 一、创建Tensor 1.1未初始化的方法 ?这些方法只是开辟了空间，所附的初始值（非常大，非常小，0），后面还需要我
  • Flask如何接收前端ajax传来的表单(包含文件)
    Flask接收前端ajax传来的表单 HTML,包含一个text类型文本框和file类型上传文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3

  • 在Python中创建累积曲线图

    在Python中创建累积曲线图
    ogive图形以图形化方式表示一组数据的累积分布函数（CDF），有时也称为累积频率曲线。它用于检查数据分布并发现模式和趋势。Matplotlib、

  • python使用openai生成图像的教程

    python使用openai生成图像的教程
    OpenAI 是一个人工智能的工具包，包括神经网络、遗传算法和有限状态机等。使用python可以非常便捷的操作OpenAI的API。一下是OpenAI官网列举的
  • Python利用百度地图API实现步行导航功能的方法
    百度地图作为一款流行的地图应用程序，不仅提供了地图浏览功能，也提供了丰富的API供开发者使用。本文将通过Python编程，利用百度地图
  • python中list.copy的用法介绍
    当我们想复制两个一模一样的列表时，我们可能使用到list.copy()这个方法，这个方法可以让我们复制一个相同的数组，当遇到下面这种情况时

  • 彻底解决python NameError:name

    彻底解决python NameError:name '__file__' is not defined的方
    问题背景 我创建了一个函数，里面包含了一个获取当前执行文件路径的代码 1 current_path = os.path.dirname(os.path.abspath(__file__)) 我把这段代码放在
  • 使用python实现md5加密的方法
    1、简介 Message Digest Algorithm MD5（中文名为消息摘要算法第五版）为计算机安全领域广泛使用的一种散列函数，用于确保信息传输完整一致。
  • Python代码模拟CPU工作原理的介绍
    理解 CPU 工作原理，重要的是理解 pc 不停地自增地址，顺序执行程序指令。当遇到跳转指令时，会将 pc 重置为新地址。在顺序执行程序指令
  • python实现数组平移K位问题介绍
    python数组平移K位 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 def move(ls: list, offset): 元素原索引+位移数
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计