http不使用Form表單發送文件數據和非文件數據(上傳篇)

時間 2019-11-10

標籤 http 不使 form 表單發送文件數據上傳欄目 HTTP/TCP 简体版

原文原文鏈接

這裏要說一下，本篇我重點說的是上傳，至於下載，查看對應的下載篇html

在原來，文件的上傳是使用form表單去提交，有的時候爲了上傳文件，還要專門爲上傳文件寫一個form表單上傳文件，十分的麻煩，探索宇宙已經很累了，哪有時間浪費啊！！^_^後端

正式進入主題app

先看看怎麼從html頁面中發送文件，回答是：使用 FormData編碼

FormData使用h5新添加的一個對象，能夠用來包裝要發送的數據，一個例子code

<body>
    <form>
        <label for="">上傳文件</label>
        <input type="file" id="picture" />
        <input type="button" value="確認提交" onclick="confirm()">
    </form>
    
    <script>
        function confirm(e){
            var xmlHttp;
            if(window.XMLHttpRequest){
                xmlHttp = new XMLHttpRequest();
            }else{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //構造FormData對象
            var formData = new FormData();
            //添加非文件數據
            formData.append("username","123456");
            formData.append("password","67890");
            //添加文件數據
            formData.append("picture",document.getElementById("picture").files[0])
            //使用POST方法發送數據
            xmlHttp.open("POST","/imageUpload",true);
            xmlHttp.send(formData)
            //返回的數據
            xmlHttp.onreadystatechange=function(){
                if (xmlHttp.readyState==4 && xmlHttp.status==200){
                    console.log(xmlHttp.responseText);
                }
            }
        }
    </script>
</body>

如上所述，你就已經發送了orm

{
    username:123456,
    password:67890,
    picture:文件數據(其實這裏是將文件轉換爲二進制了)
}

咱們能夠看見使用FormData添加數據很是的簡單，特別是解決了在上傳文件只能使用form表單的憋屈。
下面我要說說，使用FormData包裝好的數據怎麼傳輸的，我想這是很是有必要的，特別是當你在後端解析數據的時候，必需要知道傳給後臺的數據長什麼樣xml

使用FormData後，會將request的Content-Type設置爲htm

「multipart/form-data;boundary=----"+一段隨機的字母;

上面的boundary正如字面的意思同樣，就是一個分界的意思，分開每個鍵值對數據，具體的數據格式爲對象

--boundary(換行)
Content-Disposition:form-data;name=「數據的鍵」(換行)
\r\n(換行)
數據的值(「換行」)

注意每個boundary的前面要加兩個「－」
對於文件的數據格式爲:圖片

—boundary(換行)
Content-Disposition:form-data;name=「數據的鍵」;filename=「文件名」(換行)
\r\n
Content-Type:*/*(換行)
\r\n
文件的二進制編碼

用咱們前面的例子，發送的數據爲:

--boundary
Content-Disposition:form-data;name="username"
\r\n
123456
--boundary
Content-Disposition:form-data;name="password"
\r\n
67890
--boundary
Content-Disposition:form-data;name="picture";filename="上傳的文件名"
\r\n
Content-Type:image/jpeg;
對圖片進行二進制編碼後的數據
--boundary--

上面的boundary是一個變量，能夠是一串隨機數,不過FormData默認是四個"-"加一串隨機數。
在最後也要添加一個分界，不同的是在分界的先後各加了兩個"-",表示數據發送完畢。

至此上傳篇結束了