zoukankan      html  css  js  c++  java
  • FormData对象

    通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。
    它可以更灵活方便的发送表单数据,因为可以独立于表单使用。
    如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同。

    一、创建一个空对象实例

    你可以自己创建一个FormData对象,然后通过调用它的append()方法添加字段,就像这样:

     1 var formData = new FormData();
     2 
     3 formData.append("username", "Groucho");
     4 formData.append("accountnum", 123456); // 数字 123456 会被立即转换成字符串 "123456"
     5 
     6 // HTML 文件类型input,由用户选择
     7 formData.append("userfile", fileInputElement.files[0]);
     8 
     9 // JavaScript file-like 对象
    10 var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
    11 var blob = new Blob([content], { type: "text/xml"});
    12 
    13 formData.append("webmasterfile", blob);
    14 
    15 var request = new XMLHttpRequest();
    16 request.open("POST", "http://foo.com/submitform.php");
    17 request.send(formData);

    注意:FormData 对象的字段类型可以是 BlobFile, 或者 string:如果它的字段类型不是Blob也不是File,则会被转换成字符串类型。所以字段 "accountnum" 是数字类型,它将被FormData.append()方法转换成字符串类型 。

    上面的示例创建了一个FormData实例,包含"username", "accountnum", "userfile" 和 "webmasterfile"四个字段,然后使用XMLHttpRequestsend()方法发送表单数据。

    字段 "webmasterfile" 是 Blob类型。一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File 接口基于Blob,继承 blob功能并将其扩展为支持用户系统上的文件。你可以通过 Blob() 构造函数创建一个Blob对象。

    二、通过HTML表单创建FormData对象

    想要构造一个包含Form表单数据的FormData对象,需要在创建FormData对象时指定表单的元素。

    你还可以在创建一个包含Form表单数据的FormData对象之后和发送请求之前,附加额外的数据到FormData对象里。这样你就可以在发送请求之前自由地附加不一定是用户编辑的字段到表单数据里

    1 var formElement = document.querySelector("form");
    2 var formData = new FormData(formElement);
    3 var request = new XMLHttpRequest();
    4 request.open("POST", "submitform.php");
    5 formData.append("serialnumber", serialNumber++);
    6 request.send(formData);

    FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台。在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量。

    三、关于formData.append()方法

    你还可以直接向FormData对象附加File或Blob类型的文件,如下所示:

    data.append("myfile", myBlob, "filename.txt");

    使用append()方法时,可以通过第三个可选参数设置发送请求的头 Content-Disposition 指定文件名。如果不指定文件名(或者不支持该参数时),将使用名字“blob”。

    MDN参考:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

    MDN资料:FormData() https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/FormData

    segmentfault参考:https://segmentfault.com/a/1190000006716454

  • 相关阅读:
    Eclipse去掉js错误校验
    教学平台详细设计
    CentOS 6.3下部署LVS(NAT)+keepalived实现高性能高可用负载均衡
    通过CentOS克隆虚拟机后发现无法启动网卡或无法上网的解决办法
    使用U盘引导安装CentOS操作系统
    项目的热加载
    【转载】SQLServer全文搜索
    【转载】Lucence.Net
    【转载】Discuz!NT企业版之Sphinx全文搜索
    【转载】MySQL主从复制(MasterSlave)与读写分离(MySQLProxy)实践
  • 原文地址:https://www.cnblogs.com/qiqi715/p/8111752.html
Copyright © 2011-2022 走看看