關於前端上傳文件全面基礎掃盲貼(三) ----- FormData

時間 2020-01-17

標籤關於前端上傳文件全面基礎掃盲 formdata 简体版

原文原文鏈接

系列文章

關於前端上傳文件全面基礎掃盲貼(零)
關於前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest
關於前端上傳文件全面基礎掃盲貼(二) ----- File
關於前端上傳文件全面基礎掃盲貼(三) ----- FormData
關於前端上傳文件全面基礎掃盲貼(四) ----- FileReader
關於前端上傳文件全面基礎掃盲貼(五) ----- H5拖拽事件
 關於前端上傳文件全面基礎掃盲貼(六) ----- 圖片上傳,旋轉,重繪,預覽等實戰(附DEMO)javascript

FormData對象(知識點主要來源於關於FormData API)

摘自上面來源,分析的挺好,我就無恥得搬下來了FormData 對象的使用(直接看這個有點蒙圈,建議先看API再看這個實戰代碼好點,我就是踩過坑的人...╮(╯▽╰)╭)html

經過FormData對象能夠組裝一組用 XMLHttpRequest發送請求的鍵/值對。它能夠更靈活方便的發送表單數據，由於能夠獨立於表單使用。若是你把表單的編碼類型設置爲multipart/form-data ，則經過FormData傳輸的數據格式和表單經過submit() 方法傳輸的數據格式相同,與普通的ajax相比，使用FormData的最大優勢就是能夠異步上傳二進制文件前端

FormData對象FormData對象能夠把全部表單元素的name與value組成一個queryString,提交到後臺。在使用ajax提交時，使用FormData對象能夠減小拼接queryString的工做量
queryString是查詢字符串，http查詢字符串由url中？後面的值指定
當頁面上的form以GET方式向頁面發送請求數據時 (如數據含有不安全字符，則瀏覽器先將其轉換成16進制的字符再傳送，如空格被轉換成%20時 ) ,web server 將請求數據放入一名爲QUERY_STRING的環境變量中。 Request.queryString 方法是從這一環境變量中取出相應的值，並將被轉成16進制的字符還原java

說了這麼多,仍是要先看看兼容性如何,這麼一看,還好啊(舒適提示:下圖只表明支持程度,支持歸支持,不必定百分百支持,因此用到部分方法時不兼容時正常的)
web

先說說我上面說過的坑是怎麼回事吧,我就按照實戰代碼寫,而後覺得能直接看到我塞進去的東西,然而...ajax

var oMyForm = new FormData();
oMyForm.append("name", "Grady");
console.log(oMyForm) // 我覺得會輸出Grady的,可是返回的是FormData對象

好吧,這裏打印出[object FormData]這玩意,chrome里長這樣子的
chrome

咦,怎麼是個空的東西?我塞進去的數據呢?而後看到自己那堆方法,通過我大膽猜想跟虛心求教以後,FormData自己就這設置,想要看到屬性只能去用方法拿到,因此...segmentfault

var oMyForm = new FormData();
oMyForm.append("name", "Grady");
console.log(oMyForm.get('name'))

這裏就涉及到兼容性問題了,若是不兼容的話會輸出TypeError: oMyForm.get is not a function,若是正常的話就輸出'Grady'.
下面的代碼也是,我一開始使用獵豹瀏覽器編輯的,後來只好轉爲chrome正常寫下去瀏覽器

下面咱們簡單過一下比較經常使用的方法:安全

new FormData(form)

參數可選,一個HTML上的<form>表單元素——當指定了，這種方式建立的FormData對象會自動將form中的表單值也包含進去，包括文件內容也會被編碼以後包含進去。

formData.get(name)

用於返回FormData對象中和指定的鍵關聯的第一個值，若是你想要返回和指定鍵關聯的所有值，那麼可使用getAll()方法。

<!DOCTYPE html>
<html>

  <head>
    <title></title>
  </head>

  <body>
    <form id="myForm" name="myForm">
      <label for="name">name:</label>
      <input type="text" id="name" name="name">
      <input type="submit" value="Submit!" id="submit">
    </form>
    <p>你輸出的值爲:<span id='text'></span></p>
    <script type="text/javascript">
      var myForm = document.getElementById('myForm'),
        text = document.getElementById('text');

      myForm.addEventListener('submit', function (e) {
        e.preventDefault();
        var oMyForm = new FormData(myForm)
        text.innerHTML = oMyForm.get('name');
      }, false);
    </script>
  </body>

</html>

formData.set(name, value, filename)

參數	描述
name	字段名稱
value	字段的值，若是是傳入兩個參數的方式，那麼該值是一個 USVString，若是不是，將被轉成一個字符串。若是是傳入三個參數的方式，那麼該值將是一個布爾值（Blob），文件（File），或者一個 USVString，若是不是，將被轉成一個字符串
filename	可選:傳給服務器的文件名稱（一個USVString）。當第二個參數是一個布爾值（Blob）或者文件（File）的時候，Blob 對象的默認文件名是 "blob"

<!DOCTYPE html>
<html>

  <head>
    <title></title>
  </head>

  <body>
    <form id="myForm" name="myForm">
      <label for="name">name:</label>
      <input type="text" id="name" name="name">
      <input type="submit" value="Submit!" id="submit">
    </form>
    <p>你輸出的值爲:<span id='text'></span></p>
    <script type="text/javascript">
      var myForm = document.getElementById('myForm'),
        text = document.getElementById('text');

      myForm.addEventListener('submit', function (e) {
        e.preventDefault();
        var oMyForm = new FormData(myForm);
        oMyForm.set('name', 'abc');
        text.innerHTML = oMyForm.get('name');
      }, false);
    </script>
  </body>

</html>

formData.append(name, value, filename)

set() 和 append() 的區別在於，若是指定的鍵已經存在，set()會使用新值覆蓋已有的值，而 append() 會把新值添加到已有值集合的後面。

參數	描述
name	value中包含的數據對應的表單名稱
value	表單的值。能夠是USVString 或 Blob (包括子類型，如 File)
filename	可選:傳給服務器的文件名稱 (一個 USVString), 當一個 Blob 或 File 被做爲第二個參數的時候， Blob 對象的默認文件名是 "blob"。 File 對象的默認文件名是該文件的名稱

getAll()

方法會返回該 FormData 對象指定 key 的全部值。

<!DOCTYPE html>
<html>

  <head>
    <title></title>
  </head>

  <body>
    <form id="myForm" name="myForm">
      <label for="name">name:</label>
      <input type="text" id="name" name="name">
      <input type="submit" value="Submit!" id="submit">
    </form>
    <p>你輸出的值爲:<span id='text'></span></p>
    <script type="text/javascript">
      var myForm = document.getElementById('myForm'),
        text = document.getElementById('text');

      myForm.addEventListener('submit', function (e) {
        e.preventDefault();
        var oMyForm = new FormData(myForm);
        oMyForm.append('name', 'abcd');
        text.innerHTML = oMyForm.getAll('name');
      }, false);
    </script>
  </body>

</html>

FormData.entries()

返回一個 iterator對象，此對象能夠遍歷訪問FormData中的鍵值對。其中鍵值對的key是一個 USVString 對象；value是一個 USVString , 或者 Blob對象。

FormData.keys()

返回一個迭代器（iterator），遍歷了該 formData 包含的全部key ，這些 key 是 USVString 對象。

FormData.values()

返回一個容許遍歷該對象中全部值的迭代器。這些值是 USVString 或是Blob 對象。

<!DOCTYPE html>
<html>

  <head>
    <title></title>
  </head>

  <body>
    <form id="myForm" name="myForm">
      <label for="name">name:</label>
      <input type="text" id="name" name="name">
      <input type="submit" value="Submit!" id="submit">
    </form>
    <p>你輸出的值爲:<span id='text'></span></p>

    <script type="text/javascript">
      var myForm = document.getElementById('myForm'),
        text = document.getElementById('text'),
        str = '';

      myForm.addEventListener('submit', function (e) {
        e.preventDefault();
        var oMyForm = new FormData(myForm);

        for (var pair of oMyForm.entries()) {
          str += 'entries: ' + pair[0] + ', ' + pair[1] + ';<br />';
        }

        for (var key of oMyForm.keys()) {
          str += 'key: ' + key + ';<br />';
        }

        for (var value of oMyForm.values()) {
          str += 'value: ' + value + ';<br />';
        }

        text.innerHTML = str;
      }, false);
    </script>
  </body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。