static & media

在Django應用的文件夾下，經常會發現這兩個文件夾：static, media; static稱為靜態文件夾，用于存放CSS, JavaScript, 網站logo等不變的文件；相對的，把media稱為媒體文件夾，用于存放用戶上傳的圖片。

static 配置和使用

• 配置項目的settings.py:

STATIC_URL = '/static/' # 靜態文件別名（相對路徑） 和 絕對路徑 STATICFILES_DIRS = (os.path.join(BASE_DIR, 'app01/static'), ) # STATIC_ROOT 配置部署的時候才用

• 使用：

{% load static %} <img src="{% static 'img/default.jpg' %}" alt="default_photo"/>

media 配置和使用

如果需要保存用戶上傳的圖片或文件，需要作如下配置：

• 配置項目的settings.py:

MEDIA_URL = "/media/" # 媒體文件別名(相對路徑) 和 絕對路徑 MEDIA_ROOT = (os.path.join(BASE_DIR, 'app01/media') )

• 配置路由：

from django.conf.urls import url from django.views.static import serve from . import settingsurlpatterns = [# ... the rest of your URLconf goes here ...url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}) ]

• models.py中設置上傳圖片/文件字段：

from django.db import modelsclass UserInfo(models.Model):username = models.CharField(verbose_name='用戶名', max_length=32)avatar = models.FileField(verbose_name='頭像', upload_to='upload/avatar/')

upload_to相當于上傳到app01/media/upload/avatar/目錄下。

注意：

FileField或ImageField字段適用于存儲文件/圖片，出于性能考慮，文件并不直接保存到數據庫，而是保存在文件系統里，因此該字段只是記錄一個路徑而已。

這個路徑是相對于MEDIA_ROOT的，要想得到文件/圖片的絕對路徑，需要用.url方法。比如，要在頁面中顯示用戶user_obj的頭像，那么在模板中可以這樣寫：

<img src="{{ user_obj.avatar.url }}" alt="user_avatar">

其它參考：
http://blog.csdn.net/java2king/article/details/5334303

http://blog.csdn.net/junli_chen/article/details/47335919

用戶上傳頭像實踐

準備工作

• 新建一個項目，創建應用app01，如上配置好static和media，配置路由如下：

from django.conf.urls import url from app01 import views from django.views.static import serve from . import settingsurlpatterns = [url(r'^register/$', views.register),url(r'^upload/$', views.upload),url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}), ]

• 定義register視圖函數，處理用戶注冊請求：

def register(request):if request.method == 'GET':return render(request, 'register.html')

• register.html如下：

{% load static %}<style>div.custom-avatar {position: relative;width: 60px;height: 60px;}.sol {position: absolute;top: 0;left: 50px;width: 60px;height: 60px;}div.custom-avatar input {opacity: 0;}</style><form><p><label for="username">用戶名：</label></p><p><input type="text" id="username" name="username"></p><div class="custom-avatar"><label for="avatar">頭像：</label><img src="{% static 'img/default.jpg' %}" id="avatar" class="sol"><input type="file" id="file-choose" class="sol"></div><p><button>提交</button></p> </form>

說明：

這里通過<img src="{% static 'img/default.jpg' %}"...從server請求一張默認頭像；

定義CSS，令選擇文件按鈕和默認頭像重合；

• 瀏覽器訪問http://127.0.0.1:8000/register/，頁面如下：

說明：瀏覽器查看默認頭像地址為：http://127.0.0.1:8000/static/img/default.jpg；如果在調試過程中無法顯示來自server的圖像，可以通過在瀏覽器中查看圖像地址是否正確。

圖像預覽

要求：用戶每次選擇一張圖片，頁面中即時顯示該圖片的預覽

要點：JS onchange事件，每次用戶選擇了新圖片，生成新的預覽；FileReader文件閱讀器，將文件對象轉化為路徑對象

<script>//頭像預覽var fileChoose = document.getElementById("file-choose");fileChoose.onchange = function() {var file = this.files[0]; //files[0] 通過DOM對象拿到文件對象；如果是使用jQuery: $(this)[0].files[0], 要通過$(this)[0] 索引，先從JQ對象集合中拿到DOM對象var reader = new FileReader(); //實例化FileReaderreader.readAsDataURL(file); //將文件對象轉化為路徑對象reader.onload = function () { //FileReader.onload 屬性var imgEle = document.getElementById("avatar");imgEle.src = this.result //這里的this指reader對象}} </script>

說明：

var file = this.files[0]files[0] 通過DOM對象拿到文件對象；如果是使用jQuery: $(this)[0].files[0], 要通過$(this)[0]索引，先從JQ對象集合中拿到DOM對象

FileReader.onload屬性：當FileReader對象調用readAsDataURL 方法后，會觸發load事件，執行后面的函數。

圖像上傳

要點：FormDate對象發送二進制數據

• 前端上傳數據

<script>//上傳圖片，這里選擇通過Ajax提交var form = document.getElementsByTagName('form')[0];form.onsubmit = function (e) {e.preventDefault(); //阻止默認提交var username = document.getElementById('username').value;var fileObject = document.getElementById("file-choose").files[0]; //拿到圖片文件對象//實例化FormData對象，添加數據 data.append(key, value)var data = new FormData();data.append('username', username);data.append('img', fileObject);//XMLHttpRequest對象發送Ajax請求var url = '/register/';var xmlHttp = new XMLHttpRequest();xmlHttp.open('POST', url, true);xmlHttp.send(data);} </script>

說明：如果是通過jQuery發送FormDate數據，那么需要加兩個參數：contentType: false, processData: false:

var data = new FormData(); data.append('username', username); data.append('img', fileObject);$.ajax({url: '/register/',type: 'POST',data: data,processData: false, //不進行轉碼或預處理contentType: false, //不進行"application/x-www-form-urlencoded"的默認編碼處理success: function (response) {console.log(response)} })

• 后端處理，改寫register視圖函數，處理POST請求：

def register(request):if request.method == 'GET':return render(request, 'register.html')username = request.POST.get('username')avatar = request.FILES.get('img')print(avatar) # 會打印出文件名'XXX.jpg'models.UserInfo.objects.create(username=username, avatar=avatar)return HttpResponse('ok')

• 測試，輸入用戶名，選擇一張圖片，點擊提交

說明：為了方便測試，settings.py中注釋掉了csrf中間件。

查看數據庫，用戶創建成功：

查看media目錄，圖片上傳成功：

以上測試項目完整源碼：https://github.com/Ayhan-Huang/Dango-static-media

補充：

如果圖片并不是數據中model的字段，那么需要自己寫一個函數，來保存圖片：

def upload_file(request):# 拿到文件，保存在指定路徑print(request.FILES) # {'imgFile': [<InMemoryUploadedFile: QQ圖片20170523192846.jpg (image/jpeg)>]}imgFile = request.FILES.get('imgFile') # 拿到文件對象，imgFile.name, 拿到文件名with open('app01/media/upload/img/'+imgFile.name,'wb')as f: # with open 無法創建文件夾，需要自己創建for chunk in imgFile.chunks():f.write(chunk)# 返回json響應response = {'error': 0,'url': '/media/upload/img/'+imgFile.name# 客戶端拿到路徑，才能預覽圖片; media在setting中配置了別名，這里只寫media，客戶端就可以找到路徑，前面不需要加/app}return HttpResponse(json.dumps(response))

說明：

request.FILES中拿到圖片對象

imgFile.name拿到文件名

返回Json響應，error告知錯誤狀態，url用于前端對圖片進行預覽。

總結

以上是生活随笔為你收集整理的Django中static media的简单配置及图片上传实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。