FormData对象

最新推荐文章于 2025-09-07 00:18:35 发布

转载最新推荐文章于 2025-09-07 00:18:35 发布 · 76 阅读

文章标签：

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);
     
非常简单却非常实用的一个对象。