FormData对象
一、概述
FormData就是表单数据,我们提交表单所用的数据,H5里新加了FormData对象,可以让我们对表单数据进行操作,甚至自己组装表单数据进行提交,而不是单纯的仅仅是页面上表单里的元素。
FormData对象的使用:
1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组长成一个queryString
2.异步上传二进制文件
二、使用
1、构造函数返回一个FormData对象,FormData对象的操作方法,全部在原型中,自己本身没有任何的属性及方法
2、使用formData对象发送文件
注意1:使用jQuery
注意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对象。
方法
处理方法:
其中我们可以使用readAsDataURL()在文件读取完毕后读取为base64然后可以实现简单的本地图像预览。
其中,处理方法的主要程序如下,将处理封装成函数