JS-FormData对象使用

前言

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 个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义：

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

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/XMLHttpRequest
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest