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 才能拿到這個值
        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（form表單文件上傳、請求頭之contentType、Ajax傳遞json數據）