验证码的制作&头像上传

1.首先下载一个模块Pillow，这个模块以后在工作中应该会经常用到，处理图片的

2.导入from PIL import pillow

3.创建图片对象

4.保存图片（验证码的话，保存在内存中就行）

5.把正确的验证码保存在session中

def valid_code(request):  # 验证码
    from PIL import Image, ImageDraw, ImageFont  # 需要提前安装一个插件pillow
    import random
    from io import BytesIO
    f = BytesIO()
    # 画随机字符串


    #1.创建图片对象
    img = Image.new(mode="RGB", size=(120, 35),
                    color=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
    #实例化一个画笔
    draw = ImageDraw.Draw(img, mode="RGB")
    code_list = []
    for i in range(5):
        #随机字符串
        char = random.choice([chr(random.randint(65, 90)), str(random.randint(1, 9))])
        code_list.append(char)
        font = ImageFont.truetype("App01/static/bootstrap/fonts/kumo.ttf", 28)
        #添加文字
        draw.text([i * 24, 0], char, (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)),
                  font=font)
    # 保存，返回
    img.save(f, "png")
    data = f.getvalue()
    valid_code = "".join(code_list)
    #把验证码保存在session中
    request.session["valid_code"] = valid_code
    return HttpResponse(data)

6.在前端，只需要写一个img标签，src写成这个'/valid_code/'就行了，当然要在路由配置中提前配置好

还有一个验证码刷新，在前端，点击验证码的时候，触发的事件里加上这个就行了

//验证码刷新
$(".valid_code").click(function () {
    $(this)[0].src += "?"

}

这篇太少了，顺便说一下上传文件吧，以头像为例

 

本来ajax里面的data，是只能发送字符串类型的，但是当我们发送注册时用户选的头像时，是二进制类型，不是字符串，就需要用到这个formdata,

 

首先图片不应该保存在数据库中，应该是保存在硬盘上，数据库中只保存地址，所以在建表的时候，头像字段写成这样：

avatar = models.FileField(verbose_name='头像', upload_to='./upload/avatar/')

upload_to 后面是图片存放在本地的地址

     (1) 实例化一个对象

     var formData=new FormData();

这个对象，可以使用键值对来模拟一个完整的表单，然后使用XMLHttpRequest发送这个表单

 

（2）然后把数据通过这个对象传给后端

 

3.把头像传给后台：

 

后台接收普通数据是从clean_data中拿的（对于Django的Form组件提交的数据）　　

models.UserInfo.objects.create_user(username=form_obj.cleaned_data['username'],
                                                email=form_obj.cleaned_data['email'],
                                                password=form_obj.cleaned_data['password'],
                                                avatar=request.FILES.get("img"))

 

但是后台接收图片的时候是用request.FILES接收的，发送的是头像图片的地址

 4.注意，ajax中这三个地方：

processData设置为false。因为data值是FormData对象，不需要对数据做处理。

contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。

 //上传文件
                $(".login_submit").click(function () {
                    var username = $("#username").val();
                    var email = $("#email").val();
                    var password = $("#password").val();
                    var repeatpassword = $("#repeatpassword").val();
                    var valid_code = $("#valid_code").val();
                    var csrf = $("[name='csrfmiddlewaretoken']").val();

                    var formData=new FormData();

                    formData.append("username",username);
                    formData.append("password",password);
                    formData.append("email",email);
                    formData.append("repeatpassword",repeatpassword);
                    formData.append("valid_code",valid_code);
                    formData.append("csrfmiddlewaretoken",csrf);

                    //组装文件对象
                    formData.append("img",$("#file_choose")[0].files[0]);

                    $.ajax({
                        url: '/reg/',
                        type: 'POST',
                        data: formData,
                        processData:false,
                        contentType:false,

                        success: function (data) {

 头像上传在说一点前端的样式吧

首先，头像不应在form表单中，因为不是必填的

<div class="form-group file_avatar">{#    头像#}
                    <label for="file_img">头像</label>
{#                    <img src="{{ article.blog.user.avatar.url }}" alt="" id="file_img" class="sol">#}
                    <img src="{% static 'img/avatar.png' %}" alt="" id="file_img" class="sol">
                    <input type="file" id="file_choose" class="sol">
                </div>

css文件: 

.file_avatar{
    position: relative;
    width:60px;
    height: 60px;

}

.sol{
    position: absolute;
    top:0;
    left:40px;
    width: 60px;
    height: 60px;
}
#file_choose{
    opacity: 0;
}

实际就是把上传文件的那个input，变成透明的，然后默认的图片和要上传的头像大小一样，

 

还有头像预览，上传之后应该有个预览的

用change事件做

还得说个对象，

 

//头像预览
                $("#file_choose").change(function () {
                    var reader = new FileReader();　　　　　　#实例化FileReader这个对象，以便将内容读取到内存，加载结束后，触发onload事件，result属性正好可以访问最后这个数据　　 
　　
　　　　　　　　　　　　var first_file = $(this)[0].files[0];　　#拿到头像的地址 
　　　　　　　　　　　　reader.readAsDataURL(first_file);　　　　#这个方法是把文件转化成一个路径 
　　　　　　　　　　　　reader.onload=function () {　　　　　　　　#一打开页面就加载这个reader，应该是onload，而不是load 
　　　　　　　　　　　　　$("#file_img")[0].src=this.result　　#result是个属性，返回事件最后的返回值，也就是reader.readAsDataURL(first_file);

　　　　} });

 关于头像上传，详细请点击