1、AjaxUpload上傳外掛
瀏覽器迫使我們使用檔案輸入控制元件(<input type=”file” />)做上傳，然而此控制元件的樣式是不能修改的。此外，基於表單上傳在流行的Ajax應用程式面前顯得過時了。我們可以使用flash解決這個問題， 但實際上JavaScript也能做的很出色。
Ajax Upload檔案上傳外掛允許你上傳多個外掛而無需重新整理頁面，可以使用任何的元素來顯示檔案選擇視窗。它可以在所有主流的瀏覽器下工作，從2.0版本開 始，不需要任何庫執行。Ajax Upload檔案上傳外掛不會汙染任何名稱空間，所以它與jQuery，Prototypejs，mootools其他JavaScript庫相容。
Demo例項
下面是一個在jQuery下使用AjaxUpload外掛的例項。
下載
版本3.6 釋出於2009-03-10
問題，貢獻和最新版本
該專案最近已經移到了GitHub，歡迎您去折騰它。也更願意您使用“問題跟蹤（issue tracker）”留下意見，錯誤報告和要求。您必須先要在GitHub上註冊才行。
2、如何去使用它？
建立上載
首先，您需要建立一個按鈕。（可以使用任意的元素）
接下來，您應該建立Ajax上傳例項。您可以使用以下程式碼建立最簡單的形式：
JavaScript程式碼//在jquery下使用 $(document).ready
// prototype下為document.observe("dom:loaded"
new AjaxUpload('upload_button_id', {action: 'upload.php'});
配置Ajax上傳
JavaScript程式碼// 伺服器端上傳指令碼
// 注意: 檔案不允許上傳到另外一個域上
action: 'upload.php',
// 檔案上傳的名字
name: 'userfile',
// 傳送的附加資料
data: {
example_key1 : 'example_value',
example_key2 : 'example_value2′
},
// 篩選後提交檔案
autoSubmit: true,
// 您希望從伺服器返回的資料型別
// HTML (text) 和 XML 自動檢測
// 當您使用JSON作為響應時很實用，在這種情況下就設定為 "json"
// 也要設定伺服器端的響應型別為text/html, 否則在IE6下是不工作的
responseType: false,
// 檔案選擇後使用
// 當autoSubmit為disabled時很管用
// 您可以通過返回false取消上傳
// @引數file為上傳檔案的檔名
// @引數extension為那個檔案（字尾名）
onChange: function(file, extension){},
// 檔案上傳時呼叫
// 您可以通過設定返回false 取消上傳
// @引數file為上傳檔案的檔名
// @引數extension為那個檔案（字尾名）
onSubmit: function(file, extension) {},
// 當檔案上傳完成的時候呼叫
// 警告！不要使用"false"字串作為伺服器的響應
// @引數file 指上傳的檔名
// @引數 response 指伺服器的響應
onComplete: function(file, response) {}
});
注意：不要使用資料引數附加動態資料，就像"data: (txt:textfield.value）"，因為它將在AJAXUpload例項建立的時候分配資料且以後不會改變。如果你想文字框的傳遞的其他資料，使用在onSubmit回撥函式中的SetData方法。
例項方法
*submit – 提交檔案到伺服器（當autoSubmit被禁用時有用）
*disable – 禁用上傳按鈕
*enable – 允許上傳按鈕
*destroy – 清理AjaxUpload物件
* setData(data) – 覆蓋資料引數
JavaScript程式碼var upload = new AjaxUpload('#div_id',{action: 'upload.php'});
//例如當使用者選擇了一些東西，設定一些引數
upload.setData({'example_key': 'value'});
//或者您可以在事件函式中直接使用這些方法
new AjaxUpload('div_id', {
action: 'upload.php',
onSubmit: function() {
//僅允許一個上傳
this.disable();
}
});
});
3、如何訪問上載的檔案？
對於伺服器端的程式碼，檔案似乎是以簡單的形式被上傳，所以您可以使用任何您想用的語言。
您訪問上傳檔案可以使用：
* PHP: $_FILES['userfile']
* Rails: params[:userfile]
請注意，'userfile'是"name"選項的預設值
您可以訪問其他一些引數通過：
* PHP: $_POST['yourkey']
* Rails: params[:yourkey]
伺服器端指令碼
如果您使用的是PHP的，這裡是一個簡單的例子，我從PHP手冊直接獲得的。
PHP程式碼$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
echo "success";
} else {
// 警告！不要使用字串"FALSE"作為一個響應！
// 否則onSubmit 事件不會呼叫
echo "error";
}
ColdFusion的檔案上傳。 （預設準系統解決方案）
<cffunction name="uploadFile" access="remote" output="false">
<cfargument name="userFile">
<cffile action="upload" fileField="userFile" destination="directory/path/on/server/">
<cfreturn "whatever">
</cffunction>
這裡是一個ASPX處理程式，請進行修改以滿足您的需要：
C#程式碼using System.Web;
using System.IO;
public class FileHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string strFileName = Path.GetFileName(context.Request.Files[0].FileName);
string strExtension = Path.GetExtension(context.Request.Files[0].FileName).ToLower();
string strSaveLocation = context.Server.MapPath("Upload") + "" + strFileName;
context.Request.Files[0].SaveAs(strSaveLocation);
context.Response.ContentType = "text/plain";
context.Response.Write("success");
}
public bool IsReusable
{
get
{
return false;
}
}
}
4、如何只允許某些檔案型別？
最好的方法是檢查在onSubmit回撥函式選定的檔案型別，並讓函式返回false取消上傳選中的無效的檔案。但是不要忘記新增一個伺服器端的安全檢查。
JavaScript程式碼action: 'upload.php',
onSubmit : function(file , ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// 副檔名不允許
alert('錯誤：無效的副檔名！');
// 取消上傳
return false;
}
}
});
5、如何工作的？
外掛建立隱形的檔案域控制元件在您提供的按鈕上。所以，當使用者點選您的按鈕時，正常的檔案選擇視窗就會顯示。之後使用者選擇一個檔案，外掛提交包含檔案輸入框控制元件的表單到一個iframe中。因此，這不是真正的Ajax上傳，但同時帶來了使用者體驗。
6、授權與使用條款
AjaxUpload 上傳外掛是完全免費的，服從MIT license使用許可。
二、我使用php製作的最簡單的圖片上傳使用演示
首先，看圖，簡述操作。
1. 單擊按鈕，選擇圖片
2. 選擇數張圖片，例如這裡我選了三張，選完及上傳，結果如下
3. 結果在uploads資料夾下面就可以看到剛剛上傳的三張圖片了
程式碼請參考Demo或原始檔。
您可以狠狠地單擊這裡：中文Demo頁面 | 精簡版原始檔下載
說明：
1、原始檔下載至本地，需要修改檔案處理php頁面程式碼的路徑。需要將此路徑對應於您新建的用以存放圖片或其他檔案的資料夾；
2、原始檔與線上Demo有差別，原始檔中的Demo無logo，排版，廣告等，純粹的Demo，程式碼簡潔，應該會有幫助。
3、本例項是能上傳圖片，您可以去掉正則判斷，使支援其他格式。
4、本例項沒有使用JavaScript庫做輔助，這是由於本身Ajax Upload檔案上傳外掛就是純粹的JavaScript寫的，所以不依賴於任何的JavaScript庫，可以直接使用JavaScript實現多檔案上傳。
5、線上Demo請勿上傳敏感的圖片，謝謝合作。
三、結語
這款AjaxUpload多檔案上傳外掛還是很受用的，本文將原專案頁面內容原封不動的翻譯過來了，時間倉促，翻譯或書寫可能有不準確，歡迎留言指正。原專案的 Demo頁面有些亂，所以我自己用JavaScript+php實現了非常精簡的檔案上傳演示頁面，希望對您有所幫助。
四、補充
不少人問我，有沒有支援file型別input的方法。我今天想了想，改了改，實現了一個類似<input type="file" />的效果。
首先，你需要呼叫修改後的JavaScript檔案，點選這裡（右鍵下載）：修改版JS。
先看下效果，截自IE6：
原理如下，使用<input type="text" id="uploadUrl"> + <input type="button">的組合模擬<input type="file" />的表現。然後，當隱藏的file檔案域發生改變的時候，讓其值等於<input type="text">的值就可以了。
具體效果您可以狠狠地點選這裡：效果demo
至於程式碼部分，要在JavaScript的最後新增類似於下面的幾行程式碼就可以了。
JavaScript程式碼var oFile = document.getElementById("absFileInput");
if(oFile){
oFile.onchange = function(){
oUrl.value = this.value;
};
}