HTML5 API FormData --- 使用

2019年9月10日 211次阅读 来源: xingqiwu

FormData

简介

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

使用

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

  1. 构造函数
var formData = new FormData(FormElement);

这里的FormElement是html元素为form表单；当然这里也可以直接构造不用填写form元素，填写form元素的目的是可以直接选取form中表单元素的name和value为formData添加键值对。

  1. 添加
    append(): 给当前formData对象添加一个键/值对。
append(DOMString name, Blob value, optional DOMString filename);
append(DOMString name, DOMString value);

name: 字段名称，也就是键名；
value: 字段值，可以是Blob对象，可以是File对象，可以是字符串，剩下其它，该值会被自动转为字符串；
filename: (可选)指定文件的文件名，当value参数被指定为一个Blob对象或者一个File对象时，该文件名会被发送到服务器上，对于Blob对象来说，这个值默认为”blob”。

  1. 发送
    把已经添加好键值对的formData对象直接作为ajax请求时所传的参数。如果你请求成功，会看到formData会把form里的所有表单name和value生成如图所示：

《HTML5 API FormData --- 使用》

示例代码

  1. html
<form enctype="multipart/form-data"  id=”form”>
  <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" id=”file” required />
  </form>
<input type="file" name="fileother"  id=”fileother” required />
<input type="button" value="Stash the file!"  id=”submit”/>
<div></div>
  1. js – 运用了jquery之类的插件
(function(){
    var file =null, fileOther=null,fd=new FormData($("#form")[0]);
    bindEvent();
    function bindEvent(){
        $("#file").change(function(){
            file = this.files[0];
        });
        $("#fileother").change(function(){
            fileOther = this.files[0];
        })
        $("#submit").click(function(){
            fd.append("file", file);
            fd.append("fileother", fileOther);
            ajaxSend();
        })
    }
    function ajaxSend(){
        $.ajax({
            url: "your url",
            type: "post",
            data: fd,
            processData: false,  // 不处理数据
              contentType: false,   // 不设置内容类型
              success: function(resp){
                  console.log(resp);
              }
        })
    }
})()
  1. 以上的案例有一个坑，因为本人踩过，所以就留给你们踩踩吧。

其它资源

1、https://developer.mozilla.org…
2、https://developer.mozilla.org…
3、http://www.cnblogs.com/lhb25/…

    原文作者：xingqiwu
    原文地址: https://segmentfault.com/a/1190000010594729
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞