python 之头像上传，预览

上传头像

咱们须要实现的效果是：当咱们点击默认头像，用户能够进行选择要上传的头像文件，其原理就是头像的img标签与文件input（file类型）框重合或者关联，能够经过以下两种方式进行实现：

方法一label关联

 将img标签放在label标签中，经过label标签for与input标签的id关联，并将input标签隐藏，即可以实现咱们须要的功能，代码以下：

<label for="avatar">头像&nbsp;&nbsp; <img id="avatar_img" src="/static/img/default.png" alt="" width="60" height="60"></label> {# label与input id绑定在一块儿，能够实现效果#}
<input type="file" style="display: none;" id="avatar">

 

方法二：重合实现

<div class="avatar_box">
       <img src="/static/img/default.png" alt="" id="avatar_img">
       <input type="file" class="form-control" id="avatar_file">
</div>

若使两者可以重合，且点击时是进行上传文件操做，要求input放在上面，而不能被看见，不能设置隐藏，就须要对其透明度进行设置，整体的css设置以下：

 

头像预览--> reader

预览图片（与服务器无关），当用户选中图片，将url赋给src

// 头像预览 $("#avatar").change(function () { var choose_file = $(this)[0].files[0];  //获取上传文件对象 var reader = new FileReader(); // 实例化一个阅读器对象 reader.readAsDataURL(choose_file); // 读url ----> 将图片的url经过阅读器读出来结果在reader.result // 绑定图片的标签 // 绑定事件是为了防止上面语句还未将图片读完 reader.onload = function () { $("#avatar_img").attr("src", this.result) } });

 

文件上传

form上传

ajax上传

jquery中的each循环

　　each循环主要有两种应用形式，一种是对查询到的标签对象循环，另外一种就是对已知的序列数据进行循环，具体介绍实例以下：

-----------------------------

---------------------

 关于media配置（用户上传的信息）

能够使用static，但Django有提供这个功能

静态文件：static---->css、js、img、font（字体）

用户上传文件： media---->avatar、.....

只针对FileField，ImageField字段：（用户能直接访问到照片）

<img id="avatar_img" src="/static/img/default.png" alt="" width="60" height="60"></label>
// 默认会将FielField字段中的upload_to参数对应的值avatar文件下载到项目的根目录下 若是在setting里配置 # media配置(放置用户上传的文件)
    MEDIA_ROOT=os.path.join(BASE_DIR,"blog","media") //  将FileField字段中的upload_to参数对应的值avatar下载到MEDIA_ROOT指定的路径

 

使用media配置 settings.py MEDIA_URL="/media/" urls.py from blog import views url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),

 

// 总结 // 针对FileField，Imagefield字段： // 使用的话，（在页面用户能访问到） 在url.py # 给media配置的信息
from blog import views from django.views.static import serve from cnblog import settings url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}), // 若是在settings配置了一句： MEDIA_ROOT=os.path.join(BASE_DIR,"blog","media") 将FileField字段中的upload_to参数对应的值avatars下载MEDIA_ROOT路径下

 avatar 只保存url