博客项目----小功能模块

文件上传(获取用户选中文件)

 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.οnlοad=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.οnlοad=function(){
10             $("#avatar_img").attr("src",this.result)
11         };
12     })

View Code

 设置用户上传文件夹和开发次文件夹接口:

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}) ,                       #开放用户访问端口

转载于:https://www.cnblogs.com/surehunter/p/8530178.html