djangoadmin圖片上傳

A. Django上傳原理求解

隨著網站運作，難免有些時候需要上傳文件。上傳文件自然是上傳到網站所在的伺服器，日積月累，慢慢地網站存儲空間越來越少。而且網站遷移和備份都不方便，使用這些資源時也佔用大量伺服器流量。

較好的解決方案是使用第三方存儲伺服器，例如七牛、阿里雲OSS、亞馬遜S3等。將文件都放到這些存儲伺服器，可以減少伺服器負擔。伺服器只剩下必要的靜態文件和代碼。

以阿里雲OSS為例，講解如何使用第三方存儲伺服器。（剛好最近用到這個，而且Django有其他人寫好的第三方庫）

首先，需要擁有OSS。這個去阿里雲購買即可。購買之後可得到密鑰等一系列信息。

接著，安裝oss2庫，該庫是python對應oss的操作庫。

這樣設置，點擊文件鏈接，即可下載並且下載文件名是上傳的文件名。若你不是什麼類型文件都需要這么處理，可以判斷filename的後綴名加以處理。

B. Django REST framework編寫圖片上傳介面並測試

在做介面自動化時，有時會遇到圖片上傳的介面，這時Content-Type就不是application/json。

這春差里使用DRF編寫一個圖片上傳介面，並測試。

一、編寫圖片上傳接升唯口

首先創建一個我們希望用來存放文件的文件扒笑皮夾，並且在settings.py中配置路徑：

在項目的urls.py中配置media的路由：

在應用的models.py中創建模型：

並且在serializers.py中創建序列化：

編寫視圖views.py：

給應用的urls.py配置路由：

最後我們測試一下：

C. Django後台上傳的圖片前台怎麼顯示不出來路徑的問題怎樣解決

需要在 urls 中配置一下

urlpatterns=patterns('',
#第一個參數就是要顯示圖片的url
#第二個django的static模塊
#第三個文件的實際路徑
url(r'^static/(?P<path>.*)','django.views.static.serve',{'document_root':'d:/wwwsite/office/static'}),
)

然後在相應的 html 文件中

<imgsrc="/static/images/psb.jpg">

應該就可以了

這個貌似有點問題。下面的可以（python2.7 django1.5）

把 jpg 等圖片文件，放到某個app下面的 static文件夾(app Name) 文件夾下面就可以了（前提是你的css，js等文件已經能夠正常訪問）。

那麼使用 http://127.0.0.1:8000/static/zinnia/11.jpg 類似這樣的就能訪問了

有點事，需要出去趟 ，回來在處理吧 ...

D. django文件上傳的時候怎麼能加一個上傳進度的顯示

首先需要一個表單來讓用戶選擇要上傳的文件。

1 <form id="form_upload" action="/upload" method="POST">
2 <input type="file" name="picture" id="picture" />
3 <input type="hidden" id="X-Progress-ID" name="X-Progress-ID" value=""/>
4 <input type="hidden" id="id" name="id" value=""/>
5 <input id="form_submit_button" class="tp-button" type="submit" value="Submit" />
6 </form>
這里增加了兩個隱藏的輸入框，第一個是 『X-Progress-ID』，代表上傳 ID，這樣我們才能夠在伺服器端支持並發的上傳請求。稍後我們會看到，伺服器是如何處理這個值的。

然後還有一個隱藏輸入框 『id』，在我們的例子里代表菜品的編號。

我們將使用 Ajax 來發送 POST 請求，這樣表單便可以很好地集成在現代的網路界面中，同時包含一個進度條。我們打算使用 jQuery Form plugin 來實現這一點。

函數 ajaxSubmit() 將會幫我們搞定一切。

為上傳 ID 生成一個隨機字串，並用它設置輸入框的值。
需要指定一個用於上傳請求的 URL 和兩個回調函數：一個在請求前調用，另一個在請求完成後調用。

1 $('#X-Progress-ID').val('random string');
2 var options = {
3 dataType: 'xml',
4 url: '/upload?X-Progress-ID='+$('#X-Progress-ID').val(),
5 beforeSubmit: showRequest,
6 success: showResponse
7 }
8 $('#form_upload').ajaxSubmit(options);
showRequest 回調函數只需要像下面這么簡單就行了：

1 function showRequest(formData, jqForm, options) {
2 // do something with formData
3 return True;
4 }
在 showResponse 函數中，我們需要處理響應，並對它進行操作。在我的例子里，我處理了伺服器返回的帶有狀態值的 xml。

1 function showResponse(response) {
2 // do something with response
3 }
用戶按下提交的時候，我們希望顯示一個進度條，因此可以使用下面的 JS 代碼，向表單添加進度條。progressBar() 方法是 jQuery progress bar plugin 的一部分。

1 $('#form_upload').find('#form_submit_input').append('<span id="uploadprogressbar"></span<');
2 $('#form_upload').find('#uploadprogressbar').progressBar();
現在我們需要添加一個每隔幾秒運行一次的函數，來從伺服器獲取上傳進度，並相應地更新進度條。

為此，我們使用 setInterval() 向伺服器發出一個 GET 請求，獲取 JSON 格式的進度值。我們向伺服器傳送上傳 ID。當返回 null 值的時候，就可以知道上傳已經結束。

01 function startProgressBarUpdate(upload_id) {
02 $("#uploadprogressbar").fadeIn();
03 if(g_progress_intv != 0)
04 clearInterval(g_progress_intv);
05 g_progress_intv = setInterval(function() {
06 $.getJSON("/get_upload_progress?X-Progress-ID="
07 + upload_id, function(data) {
08 if (data == null) {
09 $("#uploadprogressbar").progressBar(100);
10 clearInterval(g_progress_intv);
11 g_progress_intv = 0;
12 return;
13 }
14 var percentage = Math.floor(100 * parseInt(data.uploaded) / parseInt(data.length));
15 $("#uploadprogressbar").progressBar(percentage);
16 });