前端文件上传相关知识

首先提到的是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);