上传头像

1. 添加图片文件（可以上传成功，但前端无法展示）

效果展示：

 2. 用户头像实时展示：

 效果展示：

产生随机验证码

需要用到的两个模块：

1. pillow模块

from PIL import Image, ImageFont, ImageDraw

"""
Image      产生图片
ImageFont  字体样式
ImageDraw  画笔对象
"""

2. io模块

from io import BytesIO,StringIO

"""
BytesIO    在内存中临时存储 读取的时候以bytes格式为准
StringIO   在内存中临时存储 读取的时候以字符串格式为准
"""

先定义一个随机函数：

import random


def get_random():
    return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)

产生随机验证码

随机验证码的产生步骤：

1 先产生颜色随机变换的图片对象
2 产生随机的字母或数字
3 将随机的字母和数字写到图片上
4 后端保存验证码，便于后续对比

代码：

def get_code_func(request):
    # 编写验证码
    # 先产生图片对象
    img_obj = Image.new('RGB', (350, 35), get_random())
    # 将图片对象交给画笔对象
    draw_obj = ImageDraw.Draw(img_obj)
    # 确定字体样式（ttf文件）
    font_obj = ImageFont.truetype('static/font/111.ttf', 35)
    # 产生随机验证码
    code = ''
    for i in range(5):
        random_upper = chr(random.randint(65,90))
        random_lower = chr(random.randint(97,122))
        random_int = str(random.randint(1,9))
        # 三选一
        temp_choice = random.choice([random_upper,random_lower,random_int])
        # 写到图片上
        draw_obj.text((i*60+45,0),temp_choice,font=font_obj)
        code += temp_choice
    # 后端保存验证码，便于后续的比对
    request.session['code'] = code
    io_obj = BytesIO()
    img_obj.save(io_obj,'png')
    return HttpResponse(io_obj.getvalue())

效果展示：

上面的随机验证码是在刷新网页的时候随机变换，这样的话前面填写过的信息也会随之刷新，为了不影响前面已经填写过的信息，我们需要添加局部刷新功能。 

局部刷新

1. 给前端的图片添加一个id值

2. 给该图片id绑定一个点击事件

之后点击图片即可变换新的验证码。