這篇文章主要介紹了Django專案實戰之用戶頭像上傳與訪問的範例，現在分享給大家，也給大家做個參考。一起來看看吧
1 將檔案儲存到伺服器本地
#upload.html
##
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<p>用户名:<input type="text" name="username"></p>
<p>头像<input type="file" name="avatar"></p>
<input type="submit" value="提交">
</form>
</body>
</html>from django.conf.urls import url from app01 import views urlpatterns = [ url(r'^upload',views.upload) ]
from django.shortcuts import render,HttpResponse
def upload(request):
if request.method == 'POST':
name = request.POST.get('username')
avatar = request.FILES.get('avatar')
with open(avatar.name,'wb') as f:
for line in avatar:
f.write(line)
return HttpResponse('ok')
return render(request,'upload.html')總結
這樣，我們就做好了一個基本的檔案上傳小範例，這裡需要注意的有幾點：
2.檔案的input框的type的值為file
3.在檢視函數中取得檔案要用request.FILES.get()方法
4.透過obj.name可以取得檔案的名稱
#models.py
##
from django.db import models class User(models.Model): username = models.CharField(max_length=16) avatar = models.FileField(upload_to='avatar')
def upload(request):
if request.method == 'POST':
name = request.POST.get('username')
avatar = request.FILES.get('avatar')
models.User.objects.create(username=name,avatar=avatar)
return HttpResponse('ok')
return render(request,'upload.html')#總結
##上面已經實現了將檔案上傳到資料庫的功能，需要注意的有幾點： 1.所謂的上傳到資料庫，不是講圖片本身或二進位碼放在資料庫，實際上也是將檔案上傳到伺服器本地，資料庫只是存了一個檔案的路徑，這樣使用者要呼叫檔案的時候就可以透過路徑去伺服器指定的位置找了
2.建立ORM的時候，avatar欄位要有一個upload_to=''的屬性，指定上傳後的檔案放在哪裡
4.如果有兩個使用者上傳的檔案名稱重複，系統會自動將檔案改名，效果如下：
附加
功能我們是實作了，看起來我們在呼叫檔案的時候，只需要透過資料庫檔案路徑已經儲存的檔案本身就可以存取圖片，讓它出現在網頁上，其實並不是這樣，
MEDIA_ROOT=os.path.join(BASE_DIR,"blog","media") #blog是项目名，media是约定成俗的文件夹名 MEDIA_URL="/media/" # 跟STATIC_URL类似，指定用户可以通过这个路径找到文件
2、在urls.py裡設定
#
from django.views.static import serve
from upload import settings #upload是站点名
url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),#upload. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
{% csrf_token %}
<p>用户名:<input id="name-input" type="text"></p>
<p>头像<input id="avatar-input" type="file"></p>
<input id="submit-btn" type="button" value="提交">
</form>
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>
$('#submit-btn').on('click',function () {
formdata = new FormData();
formdata.append('username',$('#name-input').val());
formdata.append("avatar",$("#avatar")[0].files[0]);
formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());
$.ajax({
processData:false,contentType:false,url:'/upload', type:'post', data:formdata,success:function (arg)
{
if (arg.state == 1){ alert('成功！') }
else { alert('失败！') } } }) });
</script>
</body>
</html>from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
from app01 import models
def upload(request):
if request.method == 'POST':
name = request.POST.get('username')
avatar = request.FILES.get('avatar')
try:
models.User.objects.create(username=name,avatar=avatar)
data = {'state':1}
except:
data = {'state':0}
return JsonResponse(data)
return render(request,'upload.html')
##總結
2.Ajax上傳的時候data參數的值不再是一個普通'字典'類型的值，而是一個FormData物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
<!----用一个label标签将上传文件输入框跟图片绑定一起，
点击图片的时候就相当于点击了上传文件的按钮---->
<label><img id="avatar-img" src="/static/img/default.png" width="80px" height="80px">
<p>头像<input id="avatar-input" hidden type="file"></p>
</label>
<input id="submit-btn" type="button" value="提交">
</form>
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>
// 上传文件按钮（label里的图片）点击事件
$('#avatar-input').on('change',function () {
// 获取用户最后一次选择的图片
var choose_file=$(this)[0].files[0];
// 创建一个新的FileReader对象，用来读取文件信息
var reader=new FileReader();
// 读取用户上传的图片的路径
reader.readAsDataURL(choose_file);
// 读取完毕之后，将图片的src属性修改成用户上传的图片的本地路径
reader.onload=function () {
$("#avatar-img").attr("src",reader.result)
}
});
</script>而怎麼樣告訴瀏覽器呢，就是透過請求體重的ContentType參數，我們上傳普通的字串的時候不用指定，因為它有預設值，
而如果要傳文件的話，就要另外指定了。總結以下幾點
1.form表單上傳的話是透過enctype="multipart/form-data" 來指定ContentType
3.form上傳的時候，檔案資料是透過標籤來''包裹''數據，
4.ajax上傳的時候，是透過一個FormData 實例物件來新增數據，傳遞的時候傳遞這個物件就行了
#相關推薦：
#
#
以上是Django計畫實戰之用戶頭像上傳與訪問的詳細內容。更多資訊請關注PHP中文網其他相關文章！
