美文网首页
头像上传实例

头像上传实例

作者: 流蓝浅 | 来源:发表于2018-04-18 11:37 被阅读0次

1:定义表单
2:定义处理函数
3:路径设置
4:显示头像
其他Model迁移等问题,不再涉及,其他文章中有

class User(models.Model):
    username = models.CharField(max_length=30)
    password = models.CharField(max_length=20)
    register_date = models.DateField(auto_now_add=True)
    portrait = models.ImageField(upload_to="headers/", default="headers/default.jpg")
    gender = models.CharField(max_length=5)
    introduction = models.CharField(max_length=60)
    phone = models.IntegerField()

1:定义表单
<body>
        <div class="login">
            <div class="login_content">
                # 这个地方一定得记得加enctype="multipart/form-data"
                <form class="form-horizontal bb" method="post" action="{% url 'pianke:register_handle'%}" enctype="multipart/form-data">
                     <br />{% csrf_token %}<br />
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Username</label>
                <div class="col-sm-10 aa">
                  <input type="text" class="form-control" name="username" id="inputEmail3" placeholder="Username">
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                <div class="col-sm-10 aa">
                  <input type="password" class="form-control" name="password" id="inputPassword3" placeholder="Password">
                </div>
              </div>
               <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label"> Phone </label>
                <div class="col-sm-10 aa">
                  <input type="text" class="form-control" name="phone" id="inputEmail3" placeholder="Phone">
                </div>
              </div>

                <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">portrait </label>
                <div class="col-sm-10 aa">
# 头像上传位置
                  <input type="file" class="form-control" name="img" id="inputEmail3">
                </div>
              </div>
               <div class="form-group">
                <div class="hehe">
                <label for="inputEmail3" class="col-sm-2 control-label">Gender</label>
                <label class="radio-inline">
                  <input type="radio" name="gender" id="inlineRadio1" value="男"> 男
                </label>
                <label class="radio-inline">
                  <input type="radio" name="gender" id="inlineRadio2" value="女"> 女
                </label>
                </div>

              </div>

              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-default">Register</button>
                </div>

                 <div class="form-group world">
                     世界很美, 而你正好有空
                 </div>


              </div>
            </form>
            </div>
        </div>
        <!--<img src="img/login-bg.png"/>   -->
    </body>
</html>

2:定义处理函数
# 实现注册表单的处理
def register_handle(request):
    if request.method == "POST":
        username = request.POST["username"]
        password = request.POST["password"]
        phone = request.POST["phone"]
        gender = request.POST["gender"]
        img = request.FILES["img"]
        user = User()
        user.username = username
        user.password = password
        user.phone = phone
        user.gender = gender
        user.portrait = img
        user.save()
        request.session["username"] = username
        # context = {"username": username}
        # return redirect("/pianke/")   # render不会把session中的数据传回前台的但是redirect会
        # return redirect(reverse("pianke:")) # 因为render不会改变路径所以不能够触发index函数进行session里面数据的获取
        return render(request,"pianke/index.html")# 而redirect可以进行url的更新所以可以取到数据
    else:
        return HttpResponse("error")

3:路径设置

4:显示头像

将头像的路径从数据库传到前台


def logined_index(request):
    # return HttpResponse("index")
    articlelist = Article.objects.all()
    username = request.session.get("username")
    user = User.objects.get(pk=13) #将某张图片取出来
    # print(user.header.url)
    # return render(request, 'pianke/logined_index.html', {'portrait': user.portrait})
    context = {
        "username": username,
        "articlelist": articlelist,
        "portrait": user.portrait,
    }
    return render(request, "pianke/logined_index.html", context)

头像路径的拼接

     <img  style="height: 30px; width: 30px" src="/static/media/{{portrait.url}}" alt="">

相关文章

  • 头像上传实例

    1:定义表单2:定义处理函数3:路径设置4:显示头像其他Model迁移等问题,不再涉及,其他文章中有 1:定义表单...

  • Django文件上传

    实例:为用户上传头像并回显 设置上传文件保存目录 定义Model,完成移植并执行 定义form表单 创建文件上传视...

  • 图片上传与ajax打包form里面的数据

    目录 头像上传的前端处理 头像上传的后端处理 ajax打包form里面的数据 1. 头像上传的前端处理 需求: 效...

  • 移动端上传头像

    上传头像

  • 纯前端实现截图生成头像

    上传头像插件 目的: 帮助开发者快速开发上传头像功能点 背景: 现在b,g能搜到的头像上传插件并不太好用,所以想提...

  • 开发经验总结

    1.头像上传功能 1.拍照或从相册选择, 头像上传。 头像修改成功之后,需要把头像image保存到沙盒。 每次页面...

  • 上传头像

    背景 在小米的面试中,最后一轮被问到了一个场景。即关于在 WebView 下开发一个用户上传头像的场景的完整流程。...

  • 上传头像

    在 User 类中增加字段: 注意:数据库中 user_image 中存储的是图片的路径,而非文件实体,所以数据类...

  • 上传头像

    //创建button和imageView -(void)createUI{ _headImageView = [F...

  • 上传头像

    NSString *base64string=[imagedata base64Encoding];

网友评论

      本文标题:头像上传实例

      本文链接:https://www.haomeiwen.com/subject/urfvkftx.html