关于前端上传文件全面基础扫盲贴(三) ----- FormData
系列文章
关于前端上传文件全面基础扫盲贴(零)
关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest
关于前端上传文件全面基础扫盲贴(二) ----- File
关于前端上传文件全面基础扫盲贴(三) ----- FormData
关于前端上传文件全面基础扫盲贴(四) ----- FileReader
关于前端上传文件全面基础扫盲贴(五) ----- H5拖拽事件
关于前端上传文件全面基础扫盲贴(六) ----- 图片上传,旋转,重绘,预览等实战(附DEMO)
FormData对象(知识点主要来源于关于FormData API)
摘自上面来源,分析的挺好,我就无耻得搬下来了FormData 对象的使用(直接看这个有点蒙圈,建议先看API再看这个实战代码好点,我就是踩过坑的人...╮(╯▽╰)╭)
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同,与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件
FormData对象FormData对象可以把所有表单元素的name与value组成一个queryString,提交到后台。 在使用ajax提交时,使用FormData对象可以减少拼接queryString的工作量
queryString是查询字符串,http查询字符串由url中?后面的值指定
当页面上的form以GET方式向页面发送请求数据时 (如数据含有不安全字符,则浏览器先将其转换成16进制的字符再传送,如空格被转换成%20时 ) ,web server 将请求数据放入一名为QUERY_STRING的环境变量中。 Request.queryString 方法是从这一环境变量中取出相应的值,并将被转成16进制的字符还原
说了这么多,还是要先看看兼容性如何,这么一看,还好啊(温馨提示:下图只代表支持程度,支持归支持,不一定百分百支持,所以用到部分方法时不兼容时正常的)
先说说我上面说过的坑是怎么回事吧,我就按照实战代码写,然后以为能直接看到我塞进去的东西,然而...
var oMyForm = new FormData(); oMyForm.append("name", "Grady"); console.log(oMyForm) // 我以为会输出Grady的,但是返回的是FormData对象
好吧,这里打印出[object FormData]
这玩意,chrome里长这样子的
咦,怎么是个空的东西?我塞进去的数据呢?然后看到本身那堆方法,经过我大胆猜测跟虚心求教之后,FormData本身就这设置,想要看到属性只能去用方法拿到,所以...
var oMyForm = new FormData(); oMyForm.append("name", "Grady"); console.log(oMyForm.get('name'))
这里就涉及到兼容性问题了,如果不兼容的话会输出TypeError: oMyForm.get is not a function
,如果正常的话就输出'Grady'.
下面的代码也是,我一开始使用猎豹浏览器编辑的,后来只好转为chrome正常写下去
下面我们简单过一下比较常用的方法:
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); for (var pair of oMyForm.entries()) { str += 'entries: ' + pair[0] + ', ' + pair[1] + ';<br />'; } for (var key of oMyForm.keys()) { str += 'key: ' + key + ';<br />'; } for (var value of oMyForm.values()) { str += 'value: ' + value + ';<br />'; } text.innerHTML = str; }, false); </script> </body> </html>
相关推荐
在新项目中使用的是springboot编写的api,涉及到ajax跨域请求和传输文件的问题,在这里记录一下。<input type="button" onclick="test();" value="