博客项目----小功能模块
文件上传(获取用户选中文件)
1 $("#avatar").change(function () { 2 // 获取用户选中的文件 3 var choose_file=$("#avatar")[0].files[0]; 4 // JS 的文件阅读器 5 var reader=new FileReader(); 6 reader.readAsDataURL(choose_file); 7 //将用户选中的文件添加到标签中,显示图片 8 reader.onload=function(){ 9 $("#avatar_img").attr("src",this.result) 10 }; 11 })
头像
1 // 头像预览 2 $("#avatar").change(function () { 3 // 获取用户选中的文件 4 var choose_file=$("#avatar")[0].files[0]; 5 // JS 的文件阅读器 6 var reader=new FileReader(); 7 reader.readAsDataURL(choose_file); 8 9 reader.onload=function(){ 10 $("#avatar_img").attr("src",this.result) 11 }; 12 })
设置用户上传文件夹和开发次文件夹接口:
model中的解释
avatar = models.FileField(upload_to = 'avatars/',default="/avatars/default.png")
#如果没有加 MEDIA_ROOT 会默认上传到 Project_blog目录下的avatars/文件夹下,加上之后就会上传到Project_blog/blog1/meida/avatars/
#其中Project_blog/blog1/meida/是我们设置的MEDIA_ROOT 路径
setting中的配置
MEDIA_ROOT=os.path.join(BASE_DIR,"blog01","media") #对用户开放上传接口
MEDIA_URL="/media/" #对用户开放访问接口 最最重要的作用是,在网页渲染的时候,你从数据库中查到
{{ article.user.avatar}} 是数据库中avatar记录的路径(/avatars/123.jpg),并且提交 这种情况下需要你在前面自己添加/media/{{ article.user.avatar}}
{{ article.user.avatar.url}} 会自动给你添加MEDIA_URL="/media/"的前缀,这种情况下如果你修改了MEDIA_URL="/xxxx6666/"
那么她提交请求的路径也会变成/xxxx6666/{{ article.user.avatar}}.
那就有问题了,那这不是跟我们的真实路径对不上,找不到图片了么.所以我们还需要修改url中的配置
url (r'^xxxx6666/(?P<path>.*)$' , serve , {'document_root': settings.MEDIA_ROOT}) ,
这个url 还需要详细解释下,如果url匹配到xxxx6666/ 就把 path=/avatars/123.jpg 加上MEDIA_ROOT 参数交给serve处理,即路径是
Project_blog\blog01\media\avatars\123.jpg.
所以如果你修改了MEDIA_URL就必须修改url
MEDIA_URL的作用,现在想想就是在需要修改域名地址的时候,我们仅仅需要 修改后台的两个代码,并不需要修改前段的代码.
MEDIA_URL="/media/"又代表的是MEDIA_ROOT或者说MEDIA_ROOT的别名,
url中配置
url (r'^media/(?P<path>.*)$' , serve , {'document_root': settings.MEDIA_ROOT}) , #开放用户访问端口
