zoukankan      html  css  js  c++  java
  • Web 前沿——HTML5 Form Data 对象的使用

    原文地址:http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html

    XMLHttpRequest Level 2 添加了一个新的接口——FormData利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件。

    您可能感兴趣的相关文章

    创建一个FormData对象

      你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段,如下:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    var oMyForm = new FormData();

    oMyForm.append("username", "Groucho");

    oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"

    // fileInputElement中已经包含了用户所选择的文件

    oMyForm.append("userfile", fileInputElement.files[0]);

    var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; // Blob对象包含的文件内容

    var oBlob = new Blob([oFileBody], { type: "text/xml"});

    oMyForm.append("webmasterfile", oBlob);

    var oReq = new XMLHttpRequest();

    oReq.open("POST", "http://foo.com/submitform.php");

    oReq.send(oMyForm);

      注:字段 "userfile" 和 "webmasterfile" 的值都包含了一个文件。通过 FormData.append() 方法赋给字段 "accountnum" 的数字被自动转换为字符(字段的值可以是一个 Blob 对象,File对象或者字符串,剩下其他类型的值都会被自动转换成字符串)。

      在该例子中,我们创建了一个名为 oMyForm 的 FormData 对象,该对象中包含了名为"username","accountnum","userfile" 以及 "webmasterfile" 的字段名,然后使用XMLHttpRequestsend() 方法把这些数据发送了出去。"webmasterfile" 字段的值不是一个字符串,还是一个 Blob 对象。

    使用HTML表单来初始化一个FormData对象

      可以用一个已有的 form 元素来初始化 FormData 对象,只需要把这个 form 元素作为参数传入 FormData 构造函数即可:

    1

    var newFormData = new FormData(someFormElement);

      例如:

    1

    2

    3

    4

    var formElement = document.getElementById("myFormElement");

    var oReq = new XMLHttpRequest();

    oReq.open("POST", "submitform.php");

    oReq.send(new FormData(formElement));

      你还可以在已有表单数据的基础上,继续添加新的键值对,如下:

    1

    2

    3

    4

    var formElement = document.getElementById("myFormElement");

    formData = new FormData(formElement);

    formData.append("serialnumber", serialNumber++);

    oReq.send(formData);

      你可以通过这种方式添加一些不想让用户编辑的固定字段,然后再发送.

    使用FormData对象发送文件

      你还可以使用 FormData 来发送二进制文件.首先在 HTML 中要有一个包含了文件输入框的 form 元素:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    <form enctype="multipart/form-data" method="post" name="fileinfo">

    <label>Your email address:</label>

    <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />

    <label>Custom file label:</label>

    <input type="text" name="filelabel" size="12" maxlength="32" /><br />

    <label>File to stash:</label>

    <input type="file" name="file" required />

    </form>

    <div id="output"></div>

    <a href="javascript:sendForm()">Stash the file!</a>

      然后你就可以使用下面的代码来异步的上传用户所选择的文件:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    function sendForm() {

    var oOutput = document.getElementById("output");

    var oData = new FormData(document.forms.namedItem("fileinfo"));

    oData.append("CustomField", "This is some extra data");

    var oReq = new XMLHttpRequest();

    oReq.open("POST", "stash.php", true);

    oReq.onload = function(oEvent) {

    if (oReq.status == 200) {

    oOutput.innerHTML = "Uploaded!";

    } else {

    oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br />";

    }

    };

    oReq.send(oData);

    }

      你还可以不借助 HTML 表单,直接向 FormData 对象中添加一个 File 对象或者一个 Blob 对象:

    1

    data.append("myfile", myBlob);

      如果 FormData 对象中的某个字段值是一个 Blob 对象,则在发送 HTTP 请求时,代表该 Blob 对象所包含文件的文件名的 "Content-Disposition" 请求头的值在不同的浏览器下有所不同,Firefox使用了固定的字符串"blob",而 Chrome 使用了一个随机字符串。

      你还可以使用 jQuery 来发送 FormData,但必须要正确的设置相关选项:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    var fd = new FormData(document.getElementById("fileinfo"));

    fd.append("CustomField", "This is some extra data");

    $.ajax({

    url: "stash.php",

    type: "POST",

    data: fd,

    processData: false// 告诉jQuery不要去处理发送的数据

    contentType: false // 告诉jQuery不要去设置Content-Type请求头

    });

    浏览器兼容性

      桌面端:

    Feature
    Chrome
    Firefox (Gecko)
    Internet Explorer
    Opera
    Safari

    Basic support
    7+
    4.0 (2.0)
    10+
    12+
    5+

    支持filename参数
    (Yes)
    22.0 (22.0)
    ?
    ?
    ?

      移动端:

    Feature
    Android
    Chrome for Android
    Firefox Mobile (Gecko)
    IE Mobile
    Opera Mobile
    Safari Mobile

    Basic support
    3.0
    ?
    4.0 (2.0)
    ?

    12+

    ?

    支持filename参数
    ?
    ?
    22.0 (22.0)
    ?
    ?
    ?

    参考文献:

  • 相关阅读:
    POJ 3259 Wormholes【BellmanFord】
    POJ 2960 SNim【SG函数的应用】
    ZOJ 3578 Matrixdp水题
    HDU 2897 邂逅明下【bash博弈】
    BellmanFord 算法及其优化【转】
    【转】几个Java的网络爬虫
    thinkphp 反字符 去标签 自动加点 去换行 截取字符串 冰糖
    php 二维数组转 json文本 (jquery datagrid 数据格式) 冰糖
    PHP 汉字转拼音(首拼音,所有拼音) 冰糖
    设为首页与加入收藏 兼容firefox 冰糖
  • 原文地址:https://www.cnblogs.com/suizhikuo/p/9192830.html
Copyright © 2011-2022 走看看