這篇文章主要介紹了使用PHP和HTML5 FormData實現無刷新文件上傳教程,本文先是分解了程序的編寫步驟,最後給出一個完整示例,需要的朋友可以參考下
無刷新文件上傳是一個常見又有點複雜的問題，常見的解決方案是建構iframe 方式實作。
在 HTML5 中提供了一個 FormData 物件 API，透過 FormData 可以方便地建構一個表單請求，並透過 XMLHttpRequest 來傳送。透過 FormData 物件傳送檔案也是可以的，如此則無刷新上傳就變的非常簡單了。
那麼 FormData 怎麼使用呢？以下腳本之家對此進行簡單的介紹。
1. 構造 FormData 物件
想得到一個FormData對象，很簡單：
?
fd = new FormData();
FormData 物件只提供了一個方法 append ，用於在物件中新增表單請求參數。
在目前主流瀏覽器中，可透過以下兩種方式取得或修改FormData。
方法一：建立一個空的FormData對象，然後再用append方法逐一加入鍵值對。例：
?
1
2
3
1 =
newFormData();
fd.append("name",
"腳本之家");
fd.append("博客",
"http://jb51.net");
fd.append("檔案",
document.getElementById("檔案"));
|
這種方法可以不需要 HTML 的表單物件存在。
方法二：取得form元素對象，將它作為參數傳入FormData對象。例：
?
1
2
"form"
);varfd = newFormData(formobj);
|
當然，這裡也可以使用 append 方法繼續在 fd 中加入其他參數。
2. FormData 發送請求
得到 FormData 物件了，如何發送請求呢？ FormData 物件主要用於增強型的 XMLHttpRequest 物件的 send 方法中。參考如下：
?
1
2
8
var
xhr =
new
XMLHttpRequest();
xhr.open("POST","http://jb51.net", 特 ; xhr.onload
= 函數(e)
{
if(這個.status
== 200) {
？
3. jquery 中使用 FormData
在 jQuery 的 ajax 方法中，也可使用 FormData 方式實現無刷新上傳。但要注意參數的設置，參考如下：
?
1
26
8
9
10
11
12
13
14
15
160
1715
160
url:
"http://jb51.net"
,
類型：
「發佈」，
資料：
fd，
/**
*必須false才會自動加上正確的Content-類型
*/
. /**
*
必須false才會避開jQuery對 formdata 的預設處理
*
XMLHttpRequest會對 formdata 進行正確的處理
*/
processData:false
}).done(function(結果){
？
4. 一個完整的例子（包含PHP處理範例）：
?
56 7
8
9
10
11
12
13
146
1513
146
1513
146
20
21
22
23
24
25
26
27
28
29
30
36
37
38
39
40
41
42
43
44
45
46
470
53
54
55
56
57
58
59
60
61
62
63
64
? //php
接收表單提交資訊並列印
如果(
isset( $_REQUEST['do'
|
|
