flask+ajax实现文件上传

高建2 2019-04-30 21:56:27 2 11 Python 537 复制链接

后端代码(.py)

from flask import render_template, url_for, request

from werkzeug.utils import secure_filename

import os,json


#定义函数完成文件上传页面的显示

def show_load_file():

    return render_template('upload.html', url = urls('upload_file'), js_path = urls('static',filename='js/jquery.min.js'), img_path = urls('static',filename='img'))


# 定义函数完成文件上传操作

def upload_file():

    if request.method == 'POST':

     BASE_DIR = os.path.dirname(__file__)

        mkdir_file(os.path.join(BASE_DIR, 'file/img/xiao'))

        #获取前端传输的文件(对象)

        f = request.files.get('file')

        # secure_filename:检测中文是否合法

        filename = secure_filename(f.filename)

        # 验证文件格式(简单设定几个格式)

        types = ['jpg','png','gif']

        if filename.split('.')[-1] in types:

         # 保存图片

            f.save(os.path.join(BASE_DIR, 'file/img/xiao/xiao_{0}'.format(filename)))

            # 返回给前端结果

            return json.dumps({'code':200,'url':url_for('download_file', filename='xiao_{0}'.format(filename), _external=True)})

        else:

            return json.dumps({'error':'文件格式不合法','code':400})

    else:

        return json.dumps({'code':405,'error':'请求方式不正确'})


# 定义函数完成图片的读取操作

def download_file(filename):

BASE_DIR = os.path.dirname(__file__)

# 打开文件目录

    path = os.path.join(BASE_DIR, 'file/img/{0}/{1}'.format(filename.split('_')[0], filename))

    # 如果存在文件,读取,返回图片数据

    if os.path.exists(path):

        f = open(path, 'rb+')

        data = f.read()

        f.close()

        return data

    else:

        return '404'


# 定义函数完成文件或文件夹的创建

def mkdir_file(dir_name):

# 如果不存在文件夹,创建文件

    if not os.path.exists(dir_name):

        os.makedirs(dir_name, 755)

    else:

     # 如果存在文件夹,遍历文件夹中的图片,重复名字进行替换(若可以

     # 存在多张图片,建议用时间戳功能区分,相同名称存取,可能会报错)

        for filename in os.listdir(dir_name):

            if os.path.isfile(os.path.join(dir_name, filename)):

                os.remove(os.path.join(dir_name, filename))


# 定义函数获取指定内容的路径

# "*"之后的会被设定为命名关键字参数,参数名不可变

def urls(fun_name, *, filename=None, external=True):

    return url_for(fun_name, filename=filename, _external=external)


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

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60


前端代码(.html)

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        * {

            padding: 0;

            margin: 0;

        }

        form {

            width: 500px;

            border: 1px solid rgba(0,0,0,0.7);

            box-shadow: inset 0 0 15px rgba(0,0,0,0.3);

            border-radius: 10px;

            margin: 100px auto;

        }

        form>div {

            margin: 15px 0;

            padding: 0 50px;

        }

        input[type='text']{

            width: 300px;

            height: 30px;

        }

        input[type='radio'] {

            margin: 0 10px;

        }

        input[type='submit'],input[type='button']{

            width: 100px;

            height: 30px;

            border: 1px solid rgba(0,0,0,0.5);

            color: white;

            background: rgba(0,0,0,0.7);

            border-radius: 5px;

        }

        form>div:last-child{

            text-align: right;

        }


        #photo {

            width: 70px;

            height: 70px;

            border-radius: 50%;

            vertical-align: middle;

            margin-left: 20px;

        }

        #file {

            display: none;

        }

    </style>

</head>

<body>

    <!--在文件上传时form表单的数据传输方式必须为post,并且编码格式必须为multipart/form-data,否则服务器端是无法获取传输的文件数据-->

    <form  method="post" enctype="multipart/form-data">

        <div>

            头像:

            <label for="file">

                <img src="{{img_path}}/photo.jpg" alt="" id="photo">

            </label>

            <input type="file" id="file" name="file">

        </div>

        <div>

            昵称: <input type="text" name="nickname">

        </div>

        <div>

            性别: <input type="radio" name="sex" value="男" checked>男

            <input type="radio" name="sex" value="女">女

        </div>

        <div>

            年龄: <input type="text" name="age">

        </div>

        <div>

            <input type="submit" value="提交">

        </div>

    </form>

</body>

<script type="text/javascript" src="{{js_path}}"></script>

<script type="text/javascript">

    $('#file').on('change',function () {

        // 获取file标签选择器的文件

        let file_obj = $('#file').get(0).files[0];

        // 将文件对象打包成form表单类型的数据

        let formdata = new FormData;

        formdata.append('file',file_obj);

        // 进行文件数据的上传

        $.ajax({

            url:'{{url}}',

            type:'post',

            data:formdata,

            processData:false,

            contentType:false,

            success:function (res) {

                //对数据json解析

                let data = JSON.parse(res);

                if (data.code == 200){

                    $('img').attr('src',data.url)

                }else {

                    alert(data.error)

                }

            }

        });

    });

</script>

</html>

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

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105


源代码链接(flask2文件夹):https://pan.baidu.com/s/10_vZeB9cB-ZiftsVhie3NQ   提取码:33nq



评论(4)

  • 头像太帅,加载不出!

    for_test评论于2020/05/25/ 12:11 0  回复

    fefsfs

  • 头像太帅,加载不出!

    admin评论于2019/05/17/ 09:30 0  回复

    rrrrrrrrrrrrrr

    for_test评论于2020/05/25/ 12:11 0

    fefef

    fsdfssd评论于2020/05/18/ 11:17 0

    fef

    fsdfssd评论于2020/05/18/ 11:17 0

    dfds

    fsdfssd评论于2020/05/18/ 11:17 0

    dfds

    加载更多 收起评论

  • 头像太帅,加载不出!

    admin评论于2019/05/17/ 09:30 0  回复

    grr

    fsdfssd评论于2020/05/18/ 11:17 0

    fefef

    加载更多 收起评论

  • 头像太帅,加载不出!

    admin评论于2019/05/17/ 09:30 0  回复

    ty 

    fsdfssd评论于2020/05/18/ 11:21 0

    fefe

    fsdfssd评论于2020/05/18/ 11:19 0

    fefe

    加载更多 收起评论