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