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

相关文章
|
3月前
|
数据安全/隐私保护
FileInfo的重要属性和方法
FileInfo类提供与静态File类相同的功能,但是您可以通过手动编写用于从文件读取或写入字节的代码来对文件的读/写操作具有更多控制权。
|
7月前
|
JSON fastjson 程序员
Json字符串转成对象
Json字符串转成对象
|
8月前
|
Java
File对象和相关方法01
File对象和相关方法01
31 0
|
8月前
|
算法
File对象和相关方法02
File对象和相关方法02
43 0
|
8月前
|
JSON Java 应用服务中间件
TypeToken分析(json字符串- list对象)
TypeToken分析(json字符串- list对象)
71 0
|
JSON JavaScript 前端开发
|
JSON 安全 fastjson
Map转成JSON字符串,对象转成JSON字符串,JSON.toJSONString()全解决
Map转成JSON字符串,对象转成JSON字符串,JSON.toJSONString()全解决
424 0
Map转成JSON字符串,对象转成JSON字符串,JSON.toJSONString()全解决
|
JavaScript
js内置对象:Array对象、Date对象、正则表达式对象、string对象
js内置对象:Array对象、Date对象、正则表达式对象、string对象
116 0
两种方式实现浅拷贝 for in实现和Object.assign({}, 对象1, 对象2);
两种方式实现浅拷贝 for in实现和Object.assign({}, 对象1, 对象2);