在常見的使用者注冊頁面，需要使用者在本地選擇一張圖檔作為頭像，并同時預覽。
常見的思路有兩種：一是将圖檔上傳至伺服器的臨時檔案夾中，并傳回該圖檔的url，然後渲染在html頁面；另一種思路是，直接在本地記憶體中預覽圖檔，使用者确認送出後再上傳至伺服器儲存。
這兩種方法各有利弊，方法一很明顯，浪費流量和伺服器資源；方法二則加重了浏覽器的負擔，并且對浏覽器的相容性要求更高(在某些低版本中的IE浏覽器不支援)。
以下是實作上述思路的方法：
1. 模闆檔案
Title
{% csrf_token %}
使用者注冊
使用者名：
密碼：
郵箱：
{# 實際應用中要将該input标簽隐藏，display:none; #}
$(function () {
bindAvatar();
});
function bindAvatar() {
if(window.URL.createObjectURL){
bindAvatar3();
}else if(window.FileReader){
bindAvatar2();
}else {
bindAvatar1();
}
}
function bindAvatar1() {
$("#avatarSlect").change(function () {
var csrf = $("input[name='csrfmiddlewaretoken']").val();
var formData=new FormData();
formData.append("csrfmiddlewaretoken",csrf);
formData.append('avatar', $("#avatarSlect")[0].files[0]);
$.ajax({
url: '/upload_avatar/',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (args) {
console.log(args);
$("#avatarPreview").attr('src','/'+args);
$("#avatar").val('/'+args);
}
})
})
}
function bindAvatar2() {
console.log(2);
$("#avatarSlect").change(function () {
var obj=$("#avatarSlect")[0].files[0];
var fr=new FileReader();
fr.οnlοad=function () {
$("#avatarPreview").attr('src',this.result);
console.log(this.result);
$("#avatar").val(this.result);
};
fr.readAsDataURL(obj);
})
}
function bindAvatar3() {
console.log(3);
$("#avatarSlect").change(function () {
var obj=$("#avatarSlect")[0].files[0];
var wuc=window.URL.createObjectURL(obj);
$("#avatarPreview").attr('src',wuc);
$("#avatar").val(wuc);
{# $("#avatarPreview").load(function () {#}
{# window.URL.revokeObjectURL(wuc);#}
{# })#}
})
}
2. 視圖函數
from django.shortcuts import render, HttpResponse
def test(request):
return render(request, 'test.html')
def upload_avatar(request):
file_obj = request.FILES.get('avatar')
file_path = os.path.join('static/images', file_obj.name)
with open(file_path, 'wb') as f:
for chunk in file_obj.chunks():
f.write(chunk)
return HttpResponse(file_path)
3. 路由系統
from django.conf.urls import url
from django.contrib import admin
from home import views as homeViews
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^upload_avatar/', homeViews.upload_avatar), # 上傳頭像
url(r'^test/', homeViews.test), # 測試頁面
]
驗證效果：
選擇圖檔前：
Ajax上傳圖檔至伺服器，并傳回浏覽器該圖檔的url：
window.FileReader本地預覽，form表單送出：
window.URL.createObjectURL本地預覽，form表單送出：
以上所述是小編給大家介紹的JS實作上傳圖檔的三種方法并實作預覽圖檔功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對腳本之家網站的支援！