JS-FormData对象使用

迷南。 2022-05-20 07:20 241阅读 0赞

#### 前言 ####

FormData 对象用来保存key/value结构的数据，通常用于from传输数据，也可以独立于form使用，用来传输密钥数据。

#### 例子 ####

1.创建FormData对象

var formData = new FormData();
    
    formData.append("username", "Groucho");
    formData.append("accountnum", 123456); // 数字将被转换成字符串 "123456"
    
    // 获取文件
    formData.append("userfile", fileInputElement.files[0]);
    
    // 创建Blob对象
    //Blob 对象表示一个不可变、原始数据的类文件对象
    var content = '<a id="a"><b id="b">hey!</b></a>'; 
    var blob = new Blob([content], { type: "text/xml"});
    
    formData.append("webmasterfile", blob);
    
    var request = new XMLHttpRequest();
    request.open("POST", "http://foo.com/submitform.php");
    request.send(formData);

2.通过form表单创建FormData对象

//表单中的input等元素必须有name属性作为可以，否则不添加到FormData对象
    var formElement = $("#form_example")[0];
    var formData = new FormData(formElement);

3.使用FormData对象发送文件数据

<html>
    <head>
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
    <form enctype="multipart/form-data" id="form_example">
        <input type="file" id="files" name="files" multiple/><br/><br/>
        <input type="text" name="userName" value="wzx"/>
        <input type="checkbox" name="test" value="1" checked/>
        <input type="checkbox" name="test" value="2" checked/>
    
    
        <input type="submit" value="提交"/>
    </form>
    
    <div id='file-list-display'></div>
    </body>
    <script type="text/javascript"> $(document).ready(function () { var fileList = []; var fileCatcher = document.getElementById('form_example'); var files = document.getElementById("files"), renderFileList; var fileListDisplay = document.getElementById('file-list-display'), sendFile; fileCatcher.addEventListener("submit", function (event) { event.preventDefault(); //使用原生的查询第一个form表单元素 // var formElement = document.querySelector("form"); //使用jq转换成js对象 var formElement = $(this)[0]; var formData = new FormData(formElement); console.log(formData.get("userName")); console.log(formData.get("files")); $.ajax({ type: 'POST', url: '/test/upload.do', //添加formData对象 data: formData, processData: false, contentType: false, success: function (response, status, xhr) { console.log(response); } }); }); }) </script>
    </html>

#### 关于XMLHttpRequest 对象 ####

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。

尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。

##### 属性 #####

**readyState**  
HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。

5 个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义：

<table> 
 <thead> 
  <tr> 
   <th>状态</th> 
   <th align="center">名称</th> 
   <th align="right">属性</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>0</td> 
   <td align="center">Uninitialized</td> 
   <td align="right">初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。</td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td align="center">Open</td> 
   <td align="right">open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td align="center">Sent</td> 
   <td align="right">Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td align="center">Receiving</td> 
   <td align="right">所有响应头部都已经接收到。响应体开始接收但未完成。</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td align="center">Loaded</td> 
   <td align="right">HTTP 响应已经完全接收。</td> 
  </tr> 
 </tbody> 
</table>

readyState 的值不会递减，除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候，都会触发 onreadystatechange 回调函数。

**responseText**  
目前为止为服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。

如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响应体。

如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，假定使用 Unicode UTF-8。

**responseXML**  
对请求的响应，解析为 XML 并作为 Document 对象返回。

**status**  
由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 “Not Found” 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。

**statusText**  
这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 “OK”，当状态为 404 的时候它是 “Not Found”。和 status 属性一样，当 readyState 小于 3 的时候读取这一属性会导致一个异常。

**timeout**  
超时时间，毫秒数。

##### 方法 #####

**abort()**  
取消当前响应，关闭连接并且结束任何未决的网络活动。

这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。

**getAllResponseHeaders()**  
把 HTTP 响应头部作为未解析的字符串返回。

如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 “\\r\\n” 隔开。

**getResponseHeader()**  
返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。

该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。

**open()**  
初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。

**send()**  
发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。

**setRequestHeader()**  
向一个打开但未发送的请求设置或添加一个 HTTP 请求。

##### 事件监听 #####

4个事件：分别是progress(加载进度)，load(请求完成并接受到服务器返回结果)，error(请求错误)，abort(终止请求)。  
代码：

var oReq = new XMLHttpRequest();
    
    oReq.upload.addEventListener("progress", updateProgress);
    oReq.upload.addEventListener("load", transferComplete);
    oReq.upload.addEventListener("error", transferFailed);
    oReq.upload.addEventListener("abort", transferCanceled);
    
    oReq.open();

> 参考  
> [https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using\_FormData\_Objects][https_developer.mozilla.org_en-US_docs_Web_API_FormData_Using_FormData_Objects]  
> [https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest][https_developer.mozilla.org_en-US_docs_Web_API_XMLHttpRequest]  
> [https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using\_XMLHttpRequest][https_developer.mozilla.org_en-US_docs_Web_API_XMLHttpRequest_Using_XMLHttpRequest]

[https_developer.mozilla.org_en-US_docs_Web_API_FormData_Using_FormData_Objects]: https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
[https_developer.mozilla.org_en-US_docs_Web_API_XMLHttpRequest]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
[https_developer.mozilla.org_en-US_docs_Web_API_XMLHttpRequest_Using_XMLHttpRequest]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest