关于FormData对像

2013-03-18 22:06 SeektonYe 阅读(158) 评论(0) 收藏举报

本来想用FileReader来做异步上传，但是在无意中看到一个有趣的对像FormData ,这个对像还是真是非常的好用。

先看下它的构造函数

new FormData (optional HTMLFormElement form)

再来看下它的方法

void append(DOMString name, Blob value, optional DOMString filename);
void append(DOMString name, DOMString value);

它的value值可以是 Blob, File 或者是String, 还可以是任意可以转化成String的值

但是它在一些低版本的浏览器上还是不兼容的，所以在使用前需要进行判断

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	7+	4.0 (2.0)	10+	12+	5+
append with filename	(Yes)	(22.0)	?	?	?

简单的使用

<form id="myForm">
    <input type="text" name="username" value="索丘" />
    <input type="file" name="filename" />
 </form>
 <input type="file" name="filedata" id="filedata" />

<script>
(function(win){
  function isSupport(){
      return !! typeof win['FormData'];
  }

  if(isSupport()){
      var myForm = document.getElementById('myForm'),
          //利用已存的form构造
          oMyForm = new FormData(myForm);
      //可以动态添加新的数据
      oMyForm.append('othername', 'xxxxxx');

      //也可以动态添加文件
      var fileElement = document.getElementById('filedata');
      oMyForm.append('userfile', fileElement.files[0]);

      //还可以添加一个数据块
      var oFileBody = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
      var oBlob = new Blob([oFileBody], { type: "text/xml"});
      //默认的文件名为blob,如果带第三个参数，则文件名为第三个参数的值
      oMyForm.append("webmasterfile", oBlob);

      var xhr = new XMLHttpRequest();
      xhr.upload.addEventListener('progress', function(ev){
          //这里可以处理上传的进度（进度条）
      });
      xhr.open("POST", "http://xxxx.com/submitform.php");
      xhr.send(oMyForm);
  }
})(window);

用起来是不是很简单

索丘

关于FormData对像

About