ext vat itl ada ipa before 選擇圖片 cti view

center.html

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

<div class="informations">
　　<p class="title">頭像設置:</p>
　　<div class="content">
　　　　<div class="left">
　　　　　　<p><img src={% static "blog/image/head.jpg" %} class="face"></p>
　　　　　　<p class="text_for_head">當前頭像</p>

　　　　</div>
　　　　<div class="right">
　　　　　　<label id="file_input" for="file_input">
　　　　　　　　　<i></i>
　　　　　　　　<span class="before">選擇圖片</span>
　　　　　　　　<span class="after">重新選擇</span>
　　　　　　</label>
　　　　</div>
　　　　<form action="" method="POST" enctype="multipart/form-data">
　　　　　　{% csrf_token %}
　　　　　　<input class="imgfile" name="avatar" type="file" style="display:none" accept="image/*" />
　　　　　　<button class="update" type="submit">更新</button>
　　　　</form>
　　</div>
</div>

利用 jq 實現 選擇圖片後直接顯示效果

$(function(){
　　$(‘.center .content input.imgfile‘).on(‘change‘, function(){

　　　　var choose_file = $(this)[0].files[0];
　　　　var reader = new FileReader();
　　　　reader.readAsDataURL(choose_file);
　　　　reader.onload = function(){
　　　　　　$(‘.body .center .content p img.face‘).attr(‘src‘, reader.result);
　　　　};
　　　　$(‘.body .center .informations #file_input span.before‘).css(‘display‘,‘none‘);
　　　　$(‘.body .center .informations #file_input span.after‘).css(‘display‘,‘block‘);
　　});
})

views.py

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

request.user.user_imformations.head = request.FILES.get(‘avatar‘)

request.user.user_imformations.save()

django 實現頭像上傳（可以瀏覽圖片）