使用PHP和HTML5 FormData實現無重新整理檔案上傳教程，_PHP教程

使用PHP和HTML5 FormData實現無重新整理檔案上傳教程，

無重新整理檔案上傳是一個常見而又有點複雜的問題，常見的解決方案是構造 iframe 方式實現。

在 HTML5 中提供了一個 FormData 對象 API，通過 FormData 可以方便地構造一個表單請求，並通過 XMLHttpRequest 來發送。通過 FormData 對象傳送檔案也是可以的，如此則無重新整理上傳就變的非常簡單了。

那麼 FormData 怎麼使用呢？下面幫客之家對此進行簡單的介紹。

1. 構造 FormData 對象

想得到一個FormData對象，很簡單：

var fd = new FormData();

FormData 對象只提供了一個方法 append ，用於向對象中添加表單請求參數。
在當前主流瀏覽器中，可通過如下兩種方式擷取或修改FormData。
方法一：建立一個空的FormData對象，然後再用append方法逐個添加索引值對。樣本：

var fd = new FormData();fd.append("name", "幫客之家");fd.append("blog", "http://jb51.net");fd.append("file", document.getElementById("file"));

這種方法可以不需要 HTML 的表單對象存在。
方法二：取得form元素對象，將它作為參數傳入FormData對象中。樣本：

var formobj = document.getElementById("form");var fd = new FormData(formobj);

當然，這裡還可以使用 append 方法繼續向 fd 中添加其他參數。

2. FormData 發送請求

得到 FormData 對象了，如何發送請求呢？ FormData 對象主要用於增強型的 XMLHttpRequest 對象的 send 方法中。參考如下樣本：

var xhr = new XMLHttpRequest();    xhr.open("POST" ,"http://jb51.net" , true);xhr.send(fd);xhr.onload = function(e) {  if (this.status == 200) {    alert(this.responseText);  }};

3. jquery 中使用 FormData

在 jQuery 的 ajax 方法中，也可使用 FormData 方式實現無重新整理上傳。但要注意參數的設定，參考如下：

$.ajax({  url: "http://jb51.net",  type: 'POST',  data: fd,  /**   *必須false才會自動加上正確的Content-Type   */  contentType:false,  /**   * 必須false才會避開jQuery對 formdata 的預設處理   * XMLHttpRequest會對 formdata 進行正確的處理   */  processData:false}).done(function(result){  console.log(result);}).fail(function(err){  console.log(err);});

4. 一個完整的樣本（包含PHP處理樣本）：

<?php//php 接收表單提交資訊並列印if( isset( $_REQUEST['do']) ){  var_dump($_REQUEST);  var_dump($_FILES);  die();}?>          FormData Test - jb51.net                  

http://www.bkjia.com/PHPjc/875394.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/875394.htmlTechArticle使用PHP和HTML5 FormData實現無重新整理檔案上傳教程， 無重新整理檔案上傳是一個常見而又有點複雜的問題，常見的解決方案是構造 iframe 方式實現。...

