首先提到的是js中的 XHR2
在XHR2中升级了一系列的功能
其中最重要与我们要介绍的文件上传功能相关的就是
xhr2 实现了下载和上传 图像、视频、音频，不再需要安装插件去实现
FormData对象
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对，可以独立于表单使用，更灵活方便的发送表单数据。
如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同。
与普通的ajax相比，使用FormData的最大优点就是可以异步上传二进制文件
下面我们简单过一下比较常用的方法:
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);
