form表單文件上傳
上菜
file_put.html
<form action="" method="post" enctype="multipart/form-data"> {# 這里必須要請求頭格式才能把上傳文件的對象傳過去 enctype="multipart/form-data"#} 姓名 <input type="text" name="user"> 頭像 <input type="file" name="head"> <input type="submit" > </form>
views.py
def file_put(request): if request.method == 'POST': print('post',request.POST) #只有 contenType== urlencoded request 才能拿到這個值 print(request.FILES) file_obj = request.FILES.get('head') with open(file_obj.name,'wb') as f: for line in file_obj: f.write(line) return HttpResponse('ok')
上面這個基於form 到表單上傳，在傳遞對象到時候必須要定義請求頭格式 nctype="multipart/form-data" 否則傳遞過來只是一個文件名稱，在服務端接收模版提交的內容必須使用 request.FILES 否則拿不到數據，通過創建文件句柄，將傳遞數據循環讀取並寫入文件，文件名稱就是接收文件的name值。
請求頭之 contentType
$.ajax contentType 和 dataType , contentType 主要設置你發送給服務器的格式，dataType設置你收到服務器數據的格式。
在http 請求中，get 和 post 是最常用的。在 jquery 的 ajax 中， contentType都是默認的值：application/x-www-form-urlencoded，這種格式的特點就是，name/value 成為一組，每組之間用 & 聯接，而 name與value 則是使用 = 連接。如： wwwh.baidu.com/q?key=fdsa&lang=zh 這是get , 而 post 請求則是使用請求體，參數不在 url 中，在請求體中的參數表現形式也是: key=fdsa&lang=zh的形式。
鍵值對這樣組織在一般的情況下是沒有什么問題的，這里說的一般是，不帶嵌套類型JSON，也就是 簡單的JSON，形如這樣：
{ a: 1, b: 2, c: 3 }
但是在一些復雜的情況下就有問題了。 例如在 ajax 中你要傳一個復雜的 json 對像，也就說是對象嵌數組，數組中包括對象，兄果你這樣傳：
{ data: { a: [{ x: 2 }] } }
這個復雜對象， application/x-www-form-urlencoded 這種形式是沒有辦法將復雜的 JSON 組織成鍵值對形式,你傳進去可以發送請求，但是服務端收到數據為空， 因為 ajax 沒有辦法知道怎樣處理這個數據。
這怎么可以呢？
聰明的程序員發現 http 還可以自定義數據類型，於是就定義一種叫 application/json 的類型。這種類型是 text ， 我們 ajax 的復雜JSON數據，用 JSON.stringify序列化后，然后發送，在服務器端接到然后用 JSON.parse 進行還原就行了，這樣就能處理復雜的對象了。
$.ajax({ dataType: 'json', contentType: 'application/json', data: JSON.stringify({a: [{b:1, a:1}]}) })
這樣你就可以發送復雜JSON的對象了。像現在的 restclient 都是這樣處理的。
Ajax傳遞json數據
file_put.html
<h1>ajax傳遞json數據</h1> <form action="" method="post"> 姓名<input type="text" name="user"> ajax<input type="submit" class="btn"> </form> <script> $('.btn').click(function () { $.ajax({ url:'', type:'post', contentType:'application/json', #這里指定了傳輸編碼，用json進行傳輸 data:JSON.stringify({ #指定數據類型為json字符串 a:1, b:2 }), success:function (data) { console.log(data) } }) })
views.py
def file_put(request): if request.method == 'POST': # print('post------',request.POST) #只有 contenType== urlencoded request 才能拿到這個值 request.POST 操作不能再 request.body前面 否則會報錯
print('body------',request.body) #請求報文中的請求體 return render(request,'file_put.html')
#輸出
post------ <QueryDict: {}>
body------ b'{"a":1,"b":2}'
[06/Dec/2018 14:53:09] "POST /file_put/ HTTP/1.1" 200 963
post------ <QueryDict: {'user': ['']}>
body------ b'user='
[06/Dec/2018 14:53:09] "POST /file_put/ HTTP/1.1" 200 963
可以看出這里接收到的數據為json類型，如果本地想使用該數據，需要將json反序列化，也就是json.loads
下面看一下看默認情況下ajax 傳輸是按哪種編碼進行傳輸的
<script> $('.btn').click(function () { $.ajax({ url:'', type:'post', #contentType:'application/json', #data:JSON.stringify({ data:({ a:1, b:2 }), success:function (data) { console.log(data) } }) }) </script>
#輸出
post------ <QueryDict: {'a': ['1'], 'b': ['2']}>
body------ b'a=1&b=2'
[06/Dec/2018 14:56:08] "POST /file_put/ HTTP/1.1" 200 918
post------ <QueryDict: {'user': ['']}>
body------ b'user='
[06/Dec/2018 14:56:08] "POST /file_put/ HTTP/1.1" 200 918
這里看一看出body 里是按照 默認的傳輸編碼 x-www-form-urlencoded 進行傳輸的
顯示的為 a=1&b=2 的格式，上面說過了這種格式對比較復雜對數據無法進行表示，所以只能使用json字符串進行傳輸。
Ajax文件上傳
首先和上面一樣，編寫好 urls 文件和 views文件，可以正常訪問到咱們的文件上傳頁面
put_file.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文件上傳</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> {#基於 Ajax文件上傳#} <form action=""> 姓名 <input type="text" id="user"> 上傳文件 <input type="file" id="head"> <input type="button" class="btn" value="ajax提交"> </form> <script> $('.btn').click(function () { {# 這里的 FormData() 為文件上傳的固定寫法，將需要傳遞的數據以鍵值對的方式進行編輯#} var formdata = new FormData(); formdata.append('user', $('#user').val()); {# 這里注意一下獲取文件的格式與普通數據不同，下面的示例就是獲取第一個文件對象#} formdata.append('head', $('#head')[0].files[0]); $.ajax({ url: '', type: 'post', {# 這里的 contentType:false processData:false 也為固定寫法，分別為編碼類型，和是否預處理數據#} contentType: false, processData: false, data: formdata, success: function (data) { console.log(data) } }) }) </script> </body> </html>
views.py
def put_file(request): if request.method == 'POST': print('body______________',request.body) print('post______________',request.POST) print(request.FILES) #獲取文件對象 file_obj=request.FILES.get('head') #將文件寫入本地 with open(file_obj.name,'wb') as f : for line in file_obj: f.write(line) return HttpResponse('ok') return render(request,'put_file.html')
就是這樣一般網站的上傳文件都是用的Ajax技術做的局部頁面刷新，上傳頭像呀之類的一些東西。