一、原理

我這里使用的是PHP作為服務端腳本，幾乎在每本較少PHP的書上都會提到如何使用move_uploaded_file()方法來上傳文件，這里我就不再細說了。我想說的是，利用Ajax上傳的原理。
因為一直在使用jQuery庫，所以當想到Ajax時，第一反應就是試試$.post()方法，利用各選擇器得到file文件框中的value值，然后提交到后臺服務端。當然，后來證明這是不行的。（正因為這問題，我還查了不少資料，網上還提供了不少ASP等方式的腳本，真不知道該說什么好。）
回到正題，要實現Ajax方式上傳，其實并不難，方法也有不少。而本文提到的Phpletter.com的ajaxfileupload.js插件就是使用iframe的方式。這也是在不使用JavaScript腳本時，要實現不刷新頁面上傳時常見的方法。（本博客bo-blog后臺撰寫日志就是用該方法）
而ajaxfileupload.js插件也很簡單，就是先利用jQuery的選擇器獲得file文件上傳框中的文件路徑值，然后動態的創建一個iframe，并在里面建立一個新的file 文件框，提供post方式提交到后臺。最后，返回結果到前臺。

二、使用

ajaxfileupload.js插件的使用很簡單。
前臺HTML代碼類似：

為了測試，可以使用類似下面的方式保存傳遞過來的變量值：

$file_info = var_export($_FILES,true);
$ok = file_put_contents("../attachment/file_info.txt",$file_info);
if ($ok) exit(json_encode('file_infor'=>'上傳成功'));
exit (json_encode('file_infor'=>'上傳失敗'));

※ 注意
請留意HTML代碼文件框中的標記：

1. id='img'是用于給ajaxfileupload.js插件的fileElementId:'img'識別的，jQuery選擇器會利用該字符串獲得文本框的值；
2. name='img'是用于通過post方式提交到后臺腳本時，PHP通過$_FILES['img']讀取上傳文件的數據，若沒有該值，$_FILES變量為空；

所以，這兩個值缺一不可，也不可混淆。

三、支持額外參數

有時候，我們需要在后臺根據某些變量來覺得對上傳文件的處理。例如，更新文件。這時，就需要往同臺再傳遞一些額外的參數。所以，我修改了ajaxfileupload.js插件：

紅色標記部分是我添加的內容。這樣，我就可以在前臺HTML部分，通過類似下面的代碼來傳遞額外的參數：

url:'doajaxfileupload.php', //你處理上傳文件的服務端
secureuri:false, //與頁面處理代碼中file相對應的ID值
data:{'test':'test','ok':'ok'}, //以對象的方式傳遞，內容部分可輸入JavaScript的變量值
fileElementId:'img',

后臺處理腳本為：

array_push($_FILES,$_REQUEST);
$file_info = var_export($_FILES,true);
$ok = file_put_contents("../attachment/file_info.txt",$file_info);
if ($ok) exit(json_encode('file_infor'=>'上傳成功'));
exit (json_encode('file_infor'=>'上傳失敗')); 

可見，原理很簡單，就是把額外的data對象內容一同加到iframe下的form中，傳遞到后臺PHP腳本，以$_REQUEST等變量獲得這些值。
后臺輸出保留的file_info.txt內容如下：

array (
'file' =>
array (
'name' => 'firefox-java.txt',
'type' => 'text/plain',
'tmp_name' => 'D:\\Tools\\xampp\\tmp\\phpED45.tmp',
'error' => 0,
'size' => 250,
),
0 =>
array (
'test' => 'test',
'ok' => 'ok',
'PHPSESSID' => 'e379fd4fb2abca6e802a1302805a5535',
),
)

ajaxfileupload.js:

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com