• FormData对象


    FormData对象是HTML5中新增的一个对象。它能使现在的AJAX交互更加简单。之前的AJAX在上传前,需要将表单的数据序列化,即jQuery中serialize;包括异步上传文件也需要写一大坨“看起来没那么必要 ”的东西。FormData能够简化这些步骤,使AJAX的数据发送变得简单清晰许多 。

    FormData有三种用法,一种是创建全新的FormData对象:

    var formData = new FormData();

    一种是获取form表单的FormData对象:

    var form = document.getElementById("form1");
    var formData = new FormData(form );
    或者通过form的getFormData方法:
    var form = document.getElementById("form1");
    var formData = form.getFormData();

    获取FormData对象后,还需要向其内部插入数据,目前只能使用append:

    //参数:(name,value);
    formData.append("pwd","123456");
    当将本地数据添加完毕后,可以通过ajax的send方法传送到服务器。
    var xhr = new XMLHttpRequest();
    xhr.open('GET',"http://localhost/",true);
    xhr.send(formData);

    当然FormData并不兼容,这是司徒正美提供的一个兼容的 FormData代码:https://gist.github.com/lemonhall/3120320

    FormData在异步上传文件上会更加省事:

    var files = fileInput.files;
    var formData = new FormData();
    //将所有文件插入formData
    for (var i=0; i<files.length; i++) {
        formData.append(fileInput.name, files[i]);
    }
                  
    var xhr = new XMLHttpRequest();
    xhr.open('POST',"http://localhost/ajaxload/test.php",true);
    //即可上传
    xhr.send(formData);

    非常简单却非常实用的一个对象。 

  • 相关阅读:
    20110825 talk 1
    [原]spring学习笔记9.1.2Spring对Aop的概念性介绍
    [转]Servlet总结
    有关锁
    [转]java中hashcode()和equals()的详解
    转置
    [转]JNDI到底是什么,有什么作用
    前端(js/css/html)那些小的知识点,持续更新......
    积累的一些常用javascript函数
    25大实用的jQuery技巧和解决方案
  • 原文地址:https://www.cnblogs.com/rinack/p/3299396.html
Copyright © 2020-2023  润新知