深入理解ajax系列第四篇——FormData

日期: 2019-12-17 17:12 浏览次数 :

无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现。

说明:本篇文章参考深入理解ajax系列第四篇——FormData这片博客,关于FormData的说明基本上都来自这篇博客

在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单请求,并通过 XMLHttpRequest 来发送。通过 FormData 对象发送文件也是可以的,如此则无刷新上传就变的非常简单了。

一、写本篇博客的原因

那么 FormData 怎么使用呢?下面脚本之家对此进行简单的介绍。

看了作者的文章,但是觉得作者文章中FormData之外关于“表单编码”、“表单序列化”的讲解过于曲高和寡,所以自己总结记录一下,以便以后翻阅。

1. 构造 FormData 对象

二、表单编码和表单序列化

想得到一个FormData对象,很简单:

首先,表单序列化(序列化定义:将对象的状态信息转换为可以存储或传输的形式的过程。)是很有必要的,因为不论使用何种请求方式,我们都需要组装数据,这就是序列化。需要讨论的是如何序列化和将表单数据序列化为何种格式的数据,就第一个问题表单元素很少时自己序列化可以接受,但是如果表单元素很多时就不可取,此时需要采用封装好的序列化函数,比如jQuery的serializeArray()、serializeobject()、serialize()等方法。下面讨论第二个问题。

var fd = new FormData();

在没有ajax之前,表单自己提交数据,表单将其每个表单元素的名字和值编码到一个字符串中并随请求发送;默认情况下,HTML表单通过POST方法发送给服务器,而编码后的表单数据则用做请求主体。

FormData 对象只提供了一个方法 append ,用于向对象中添加表单请求参数。在当前主流浏览器中,可通过如下两种方式获取或修改FormData。方法一:创建一个空的FormData对象,然后再用append方法逐个添加键值对。示例:

ajax产生之后表单数据一般都通过ajax提交,而且由于前后端现在普遍使用json交互,所以更多的我们采用jQuery的serializeobject()方法将表单序列化为json数据。

var fd = new FormData();fd.append;fd.append("blog", "http://jb51.net");fd.append("file", document.getElementById;

三、FormData

这种方法可以不需要 HTML 的表单对象存在。方法二:取得form元素对象,将它作为参数传入FormData对象中。示例:

当HTML表单同时包含文件上传元素和其他元素时,浏览器不能使用普通的表单编码而必须使用称为“multipart/form-data”的特殊Content-Type来用POST方法提交表单。这种编码包括使用长“边界”字符串把请求主体分离成多个部分。对于文本数据,手动创建“multipart/form-data”请求主体是可能的,但很复杂

var formobj = document.getElementById;var fd = new FormData;

  XMLHttpRequest 2级为此定义了FormData类型。FormData为序列化表单以及创建与表单格式相同的数据(用于通过XHR传输)提供了便利

当然,这里还可以使用 append 方法继续向 fd 中添加其他参数。

【构造函数】

2. FormData 发送请求

        newFormData (form? : HTMLFormElement)

得到 FormData 对象了,如何发送请求呢? FormData 对象主要用于增强型的 XMLHttpRequest 对象的 send 方法中。参考如下示例:

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

var xhr = new XMLHttpRequest(); xhr.open("POST" ,"http://jb51.net" , true);xhr.send;xhr.onload = function { if  { alert; }};

【append()】

3. jquery 中使用 FormData

  append()方法用于给当前FormData对象添加一个键/值对

在 jQuery 的 ajax 方法中,也可使用 FormData 方式实现无刷新上传。但要注意参数的设置,参考如下:

        void append(DOMString name, Blob value, optional DOMString filename);

$.ajax({ url: "http://jb51.net", type: 'POST', data: fd, /** *必须false才会自动加上正确的Content-Type */ contentType:false, /** * 必须false才会避开jQuery对 formdata 的默认处理 * XMLHttpRequest会对 formdata 进行正确的处理 */ processData:false}).done{ console.log.fail{ console.log;

        voidappend(DOMString name, DOMString value);

4. 一个完整的示例:

  参数值name表示字段名称;参数值value表示字段值;参数值filename(可选)用于指定文件的文件名,当value参数被指定为一个Blob对象或者一个File对象时,该文件名会被发送到服务器上,对于Blob对象来说,这个值默认为"blob"

  FormData Test - jb51.net     $.submit{ e.preventDefault(); //空对象然后添加 var fd = new FormData(); fd.append; fd.append("blog", "http://jb51.net"); fd.append("file", document.getElementById; //fd.append[0].files[0]); //jQuery 方式 fd.append; //通过表单对象创建 FormData var fd = new FormData(document.getElementById; //var fd = new FormData; //jquery 方式 //XMLHttpRequest 原生方式发送请求 var xhr = new XMLHttpRequest(); xhr.open; xhr.send; xhr.onload = function { if  { alert; }; }; return; //jQuery 方式发送请求 $.ajax({ type:"post", //url:"", data: fd, processData: false, contentType: false }).done{ console.log; return false; });  

【其他不常用方法】

  get():通过get(key)/getAll(key)来获取对应的value

  set():通过set(key,value)修改数据,如果指定的key不存在则新增一条,如果存在,则修改对应的value值

  has():通过has(key)来判断是否对应的key值