概述

瀏覽器中檔案上傳，有兩種方案，一種是表單上傳，一種是通過ajax上傳

表單上傳

三要素

先看看錶單上傳三要素，待會再講為啥要這樣設定：

1. method屬性設定成post
2. 檔案上傳項的type必須為file
3. enctype屬性必須為multipart/form-data

舉例

我的上傳元件是這樣：

<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="text" name="info">
    <input type="file" name="upload">
    <button type="submit">上傳</button>
</form>
 

我會對 name 為 info 的輸入框填入test
而檔案我選擇了test.txt，該檔案的內容是一段話：hello word
當我點選上傳後，瀏覽器會把這個表單整合成一個http報文，然後傳送給相應的action路徑，比如上述的會生成如下http請求報文（刪除了多餘的請求頭資訊,只保留重點Content-Type）：

POST /upload HTTP/1.1
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary51R26gaG9hSSCrHF

----WebKitFormBoundary51R26gaG9hSSCrHF
Content-Disposition: form-data; name="info"

test
----WebKitFormBoundary51R26gaG9hSSCrHF
Content-Disposition: form-data; name="upload"; filename="test.txt"
Content-Type: text/plain
hello word
----WebKitFormBoundary51R26gaG9hSSCrHF-

注意請求頭的Content-Type是對http請求報文的請求體部分進行編碼，是瀏覽器根據from的enctype屬性自動進行相應編碼的，不需要人控制。
所以為什麼需要設定post請求，原因也在此，只有表單設定為post，瀏覽器才會將表單資料放入請求體。而設定了enctype為multipart/form-data

GET /upload?upload=test&filename=test.txt HTTP/1.1

同理，post請求，未設定enctype（預設值為："application/x-www-form-urlencoded"），則post請求報文為：

POST /upload HTTP/1.1
Content-Type: application/x-www-form-urlencoded

upload=test&filename=test.txt