HTML5 FormData实现文件上传实例-白红宇

原文:

表单提交，文件上传是一个常用又十分麻烦的功能，以前要上传文件通常都是借助插件或者flash来实现，噼里啪啦的加载一大堆东西。自从有了HTML5的FormData后，老板再也不用担心我的上传了。

FormData可以把它理解成一个虚拟的表单对象，它只有一个方法append，这个可以在浏览器console一下就知道了。我们可以通过append向FormData里面添加各种需要提交的数据。

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

oMyForm.append("username", "Groucho");oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456" // fileInputElement中已经包含了用户所选择的文件oMyForm.append("userfile", fileInputElement.files[0]);var oReq = new XMLHttpRequest();oReq.open("POST", "http://foo.com/submitform.php");oReq.send(oMyForm);

如果已经有一个Form表单，只需要把这个 form 元素作为参数传入 FormData 构造函数即可：

var newFormData = new FormData(someFormElement);

var formElement = document.getElementById("myFormElement");var oReq = new XMLHttpRequest();oReq.open("POST", "submitform.php");oReq.send(new FormData(formElement));

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

var formElement = document.getElementById("myFormElement");formData = new FormData(formElement);formData.append("serialnumber", serialNumber++);oReq.send(formData);


       
      Your email address:  
      
      
  
      Custom file label:  
      
      
  
      File to stash:  
      
     
     
Stash the file!

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

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.
";    }  };   oReq.send(oData);}

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

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请求头});

一个完整的例子：

    
         FormData    
               
      name:
          
      gender:male female
          
      photo:

server.php文件：