关于前端上传文件全面基础扫盲贴(三) ----- FormData

developerworks 发布于2019-08-26 10:30 / 689人阅读

摘要：如果是传入三个参数的方式，那么该值将是一个布尔值，文件，或者一个，如果不是，将被转成一个字符串可选传给服务器的文件名称一个。

系列文章

关于前端上传文件全面基础扫盲贴(零)
关于前端上传文件全面基础扫盲贴(一) ----- 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上的

表单元素——当指定了，这种方式创建的FormData对象会自动将form中的表单值也包含进去，包括文件内容也会被编码之后包含进去。

formData.get(name)

用于返回FormData对象中和指定的键关联的第一个值，如果你想要返回和指定键关联的全部值，那么可以使用getAll()方法。

name:

你输出的值为:

formData.set(name, value, filename)

参数	描述
name	字段名称
value	字段的值，如果是传入两个参数的方式，那么该值是一个 USVString，如果不是，将被转成一个字符串。如果是传入三个参数的方式，那么该值将是一个布尔值（Blob），文件（File），或者一个 USVString，如果不是，将被转成一个字符串
filename	可选:传给服务器的文件名称（一个USVString）。当第二个参数是一个布尔值（Blob）或者文件（File）的时候，Blob 对象的默认文件名是 "blob"

你输出的值为:

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 的所有值。

你输出的值为:

FormData.entries()

返回一个 iterator对象，此对象可以遍历访问FormData中的键值对。其中键值对的key是一个 USVString 对象；value是一个 USVString , 或者 Blob对象。

FormData.keys()

返回一个迭代器（iterator），遍历了该 formData 包含的所有key ，这些 key 是 USVString 对象。

FormData.values()

返回一个允许遍历该对象中所有值的迭代器。这些值是 USVString 或是Blob 对象。

你输出的值为:

云服务器 GPU云服务器服务器扫盲贴 formdata上传文件关于前端关于前端开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106288.html

关于前端上传文件全面基础扫盲贴(五) ----- H5拖拽事件

摘要：在中，拖放是标准的一部分，任何元素都能够拖放。如果需要设置允许放置，我们必须阻止对元素的默认处理方式方法。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) ----- File关于前端上传文件全面基础扫盲贴(三) ----- FormData关于前端上传文件全面基础扫盲贴(...

iKcamp 2019-08-26 10:31 评论0 收藏0
关于前端上传文件全面基础扫盲贴(二) ----- File

摘要：为了解救上面说到的问题是向提交的一个草案，旨在推出一套标准的，其基本功能是实现用对本地文件进行操作。出于安全性的考虑，该只对本地文件提供有限的访问。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) ----- File关于前端上传文件全面基础扫盲贴(三) ----- For...

scola666 2019-08-26 10:31 评论0 收藏0
关于前端上传文件全面基础扫盲贴(零)

摘要：表单用于向服务器传输数据。属性对象的属性指定了一个事件句柄函数。标签的属性应当与相关元素的属性相同。详情查阅请狠狠地点击关于对象代表表单中的一个提交按钮在表单提交之前，触发事件句柄，并且一个句柄可以通过返回来取消表单提交。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) -...

SnaiLiu 2019-08-02 15:42 评论0 收藏0
关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest

摘要：状态表示对象的状态状态描述未初始化。表示成功，表示未找到，表示服务器内部错误等。前提是浏览器必须支持这个功能，而且服务器端必须同意这种跨域。事件传输成功完成。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) ----- File关于前端上传文件全面基础扫盲贴(三) ----...

i_garfileo 2019-08-26 10:29 评论0 收藏0