上传头像功能及用户上传文件的保存

前端的文件上传功能

我们可以使用label标签将头像包起来,将label的for属性只想上传头像的input标签,然后把input标签隐藏,

当我们点击头像时会弹出文件选择框

<label for="avatar">头像
    <img id="avatar_img" src="#" alt="" width="60" height="60">
</label>

另外还要使用户选择完图片后将图片显示在头像的位置

// input框id为avatar,头像img标签id为avatar_img
$("#avatar").change(function () {
        // input标签中的文件对象
         var choose_file=$(this)[0].files[0];
         var reader=new FileReader();  // 阅读器
         reader.readAsDataURL(choose_file);  // 读取文件对象的url
        // 阅读器对象读取完毕后,更改图片的url地址
         reader.onload=function () {
            $("#avatar_img").attr("src",this.result)
        }
    });

input中的文件对象

用户上传文件的存储

存储文件的模型属性

class UserInfo(AbstractUser):
   ...
    avatar = models.FileField(upload_to = 'avatars/',default="/avatar/default.png")
    ...
# 数据库中的文件字段上实际上只存了文件的地址
# upload_to 是文件保存的位置,default是默认只用的头像

# 用户上传文件的默认保存位置是在项目目录下
MEDIA_ROOT=os.path.join(BASE_DIR,"blog","media")
# 该配置修改文件的保存目录

# 另外用户上传的文件也应像静态文件一样可以被客户端访问
MEDIA_URL="/media/"
# MEDIA_URL的值就代表了MEDIA_ROOT的文件目录,在浏览器可以向访问静态文件一样来访问用户上传文件

视图中保存文件

avatar_obj=request.FILES.get("avatar") # 图片对象     
user_obj=UserInfo.objects.create_user(username=user,password=pwd,email=email,avatar=avatar_obj)
# Django模型会将文件存储在对应的位置,并在数据库中存储文件的地址

模板中使用上传的图片

# 数据库中存储的是文件的路径,所以我们直接拼成一个url就可以了
<img width="70" height="70" src="/media/{{ 数据库中的url }}" alt=""></p>

 配置文件中的url也要配置

from django.views.static import serve
setting是项目的配置文件
url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}