django 實現頭像上傳(可以瀏覽圖片)
阿新 • • 發佈:2019-01-25
ext vat itl ada ipa before 選擇圖片 cti view
</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> 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‘);
});
})
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 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">
<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 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 實現頭像上傳(可以瀏覽圖片)