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