FileReader对象和FormData对象

简介: FormData对象一、概述FormData就是表单数据,我们提交表单所用的数据,H5里新加了FormData对象,可以让我们对表单数据进行操作,甚至自己组装表单数据进行提交,而不是单纯的仅仅是页面上表单里的元素。

FormData对象

一、概述

FormData就是表单数据,我们提交表单所用的数据,H5里新加了FormData对象,可以让我们对表单数据进行操作,甚至自己组装表单数据进行提交,而不是单纯的仅仅是页面上表单里的元素。

FormData对象的使用:

1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组长成一个queryString

2.异步上传二进制文件

二、使用

1、构造函数返回一个FormData对象,FormData对象的操作方法,全部在原型中,自己本身没有任何的属性及方法

img_ebde989fc6145f5799c3231c7bdf4e27.png
img_fd50b8248c534bdaee368ddab1640909.png

2、使用formData对象发送文件

img_3103e64ab156abb515254370862cb0df.png

注意1:使用jQuery

img_f05ad62478a5bb4c2c1d181088d0ec81.png

注意2:参数

一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框,参数可选

new FormData的参数是一个DOM对象,而非jQuery对象

var formData = new FormData($('#file')[0])

三、jQuery的参数序列化方法serialize()

序列表表格内容为字符串,用于 Ajax 请求。 

$("form").serialize()

四、FormData对象的方法

append

给当前formData对象添加一个键/值对 formData.append('name',value);formData.append('grade','5').............组装出来form数据后我们可以通过表单或者AJAX往后台发送请求。



FileReader对象

FileReader对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用file或者blob对象置顶要读取的文件或者数据

其中File对象可以是用户在一个元素上选择文件后返回的fileList对象,也可以来自拖放操作生成的Datatransfer对象,还可以是在HTM;CanvasElement上执行mozGetAsFile()方法后返回结果

构造函数

FileReader() return a newly constructed FileReader返回一个FileReader对象。

方法

img_04a9a5c58519ccf662224ee1d5ee6a8d.png

处理方法:

img_02d2f10e0291c5005cc8051d3aad6ed4.png

其中我们可以使用readAsDataURL()在文件读取完毕后读取为base64然后可以实现简单的本地图像预览。

其中,处理方法的主要程序如下,将处理封装成函数

img_20bd4665c1a6b617a99502945c1a049e.png

参考文档:https://www.jianshu.com/p/97e76a00a9e9

相关文章
|
2月前
|
数据安全/隐私保护
FileInfo的重要属性和方法
FileInfo类提供与静态File类相同的功能,但是您可以通过手动编写用于从文件读取或写入字节的代码来对文件的读/写操作具有更多控制权。
|
8天前
|
API 索引
封装QueryString构造函数,实现stringify、parse方法
【7月更文挑战第2天】实现QueryString构造函数,包含`stringify`和`parse`方法。`stringify`将对象转换为查询字符串,如`?a=1&b=2&c=1,2`。第一种实现使用for循环和模板字符串,第二种实现利用ES6的`Object.keys`, `map`和`join`。`parse`方法将查询字符串转换回对象,处理数组情况。主要使用`split`方法拆分字符串并遍历处理。
13 0
|
11月前
|
算法
File对象和相关方法02
File对象和相关方法02
57 0
|
11月前
|
Java
File对象和相关方法01
File对象和相关方法01
45 0
|
11月前
|
JSON Java 应用服务中间件
TypeToken分析(json字符串- list对象)
TypeToken分析(json字符串- list对象)
89 0
C#编程-119:读取文件StreamReader类
C#编程-119:读取文件StreamReader类
C#编程-119:读取文件StreamReader类
|
JavaScript
js内置对象:Array对象、Date对象、正则表达式对象、string对象
js内置对象:Array对象、Date对象、正则表达式对象、string对象
122 0
|
JSON 前端开发 JavaScript
利用JsonConvert.SerializeObject()实现类对象的json化
利用JsonConvert.SerializeObject()实现类对象的json化
788 0
利用JsonConvert.SerializeObject()实现类对象的json化
|
XML JSON JavaScript
C#解析json文件的方法
C# 解析 json   JSON(全称为JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript语法标准的一个子集。 JSON采用完全独立于语言的文本格式,可以很容易在各种网络、平台和程序之间传输。
1675 0
两种方式实现浅拷贝 for in实现和Object.assign({}, 对象1, 对象2);
两种方式实现浅拷贝 for in实现和Object.assign({}, 对象1, 对象2);