by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=342
一、以下為項(xiàng)目主頁(yè)正文翻譯（包括代碼注釋的翻譯）：
1、Ajax Upload上傳插件
瀏覽器迫使我們使用文件輸入控件(<input type=”file” />)做上傳，然而此控件的樣式是不能修改的。此外，基于表單上傳在流行的Ajax應(yīng)用程序面前顯得過(guò)時(shí)了。我們可以使用flash解決這個(gè)問(wèn)題，但實(shí)際上JavaScript也能做的很出色。
Ajax Upload文件上傳插件允許你上傳多個(gè)插件而無(wú)需刷新頁(yè)面，可以使用任何的元素來(lái)顯示文件選擇窗口。它可以在所有主流的瀏覽器下工作，從2.0版本開始，不需要任何庫(kù)運(yùn)行。Ajax Upload文件上傳插件不會(huì)污染任何命名空間，所以它與jQuery，Prototypejs，mootools其他JavaScript庫(kù)兼容。
Demo實(shí)例
下面是一個(gè)在jQuery下使用Ajax Upload插件的實(shí)例。
下載
版本3.6 發(fā)布于2009-03-10
問(wèn)題，貢獻(xiàn)和最新版本
該項(xiàng)目最近已經(jīng)移到了GitHub，歡迎您去折騰它。也更愿意您使用“問(wèn)題跟蹤（issue tracker）”留下意見，錯(cuò)誤報(bào)告和要求。您必須先要在GitHub上注冊(cè)才行。
2、如何去使用它？
創(chuàng)建上載
首先，您需要?jiǎng)?chuàng)建一個(gè)按鈕。（可以使用任意的元素）
接下來(lái)，您應(yīng)該創(chuàng)建Ajax上傳實(shí)例。您可以使用以下代碼創(chuàng)建最簡(jiǎn)單的形式：
配置Ajax上傳
注意：不要使用數(shù)據(jù)參數(shù)附加動(dòng)態(tài)數(shù)據(jù)，就像“data: (txt:textfield.value）”，因?yàn)樗鼘⒃贏JAX Upload實(shí)例創(chuàng)建的時(shí)候分配數(shù)據(jù)且以后不會(huì)改變。如果你想文本框的傳遞的其他數(shù)據(jù)，使用在onSubmit回調(diào)函數(shù)中的SetData方法。
實(shí)例方法
*submit – 提交文件到服務(wù)器（當(dāng)autoSubmit被禁用時(shí)有用）
*disable – 禁用上傳按鈕
*enable – 允許上傳按鈕
*destroy – 清理AjaxUpload對(duì)象
* setData(data) – 覆蓋數(shù)據(jù)參數(shù)
3、如何訪問(wèn)上載的文件？
對(duì)于服務(wù)器端的代碼，文件似乎是以簡(jiǎn)單的形式被上傳，所以您可以使用任何您想用的語(yǔ)言。
您訪問(wèn)上傳文件可以使用：
* PHP: $_FILES['userfile']
* Rails: params[:userfile]
請(qǐng)注意，’userfile’是”name”選項(xiàng)的默認(rèn)值
您可以訪問(wèn)其他一些參數(shù)通過(guò)：
* PHP: $_POST['yourkey']
* Rails: params[:yourkey]
服務(wù)器端腳本
如果您使用的是PHP的，這里是一個(gè)簡(jiǎn)單的例子，我從PHP手冊(cè)直接獲得的。
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
echo “success”;
} else {
// 警告！不要使用字符串”FALSE”作為一個(gè)響應(yīng)！
// 否則onSubmit 事件不會(huì)調(diào)用
echo “error”;
}
ColdFusion的文件上傳。 （默認(rèn)準(zhǔn)系統(tǒng)解決方案）
這里是一個(gè)ASPX處理程序，請(qǐng)進(jìn)行修改以滿足您的需要：
4、如何只允許某些文件類型？
最好的方法是檢查在onSubmit回調(diào)函數(shù)選定的文件類型，并讓函數(shù)返回false取消上傳選中的無(wú)效的文件。但是不要忘記添加一個(gè)服務(wù)器端的安全檢查。
5、如何工作的？
插件創(chuàng)建隱形的文件域控件在您提供的按鈕上。所以，當(dāng)用戶點(diǎn)擊您的按鈕時(shí)，正常的文件選擇窗口就會(huì)顯示。之后用戶選擇一個(gè)文件，插件提交包含文件輸入框控件的表單到一個(gè)iframe中。因此，這不是真正的Ajax上傳，但同時(shí)帶來(lái)了用戶體驗(yàn)。
6、授權(quán)與使用條款
Ajax Upload 上傳插件是完全免費(fèi)的，服從MIT license使用許可。
二、我使用php制作的最簡(jiǎn)單的圖片上傳使用演示
首先，看圖，簡(jiǎn)述操作。
1. 單擊按鈕，選擇圖片
代碼請(qǐng)參考Demo或源文件。
您可以狠狠地單擊這里：中文Demo頁(yè)面 | 精簡(jiǎn)版源文件下載
說(shuō)明：
1、源文件下載至本地，需要修改文件處理php頁(yè)面代碼的路徑。需要將此路徑對(duì)應(yīng)于您新建的用以存放圖片或其他文件的文件夾；
2、源文件與在線Demo有差別，源文件中的Demo無(wú)logo，排版，廣告等，純粹的Demo，代碼簡(jiǎn)潔，應(yīng)該會(huì)有幫助。
3、本實(shí)例是能上傳圖片，您可以去掉正則判斷，使支持其他格式。
4、本實(shí)例沒(méi)有使用JavaScript庫(kù)做輔助，這是由于本身Ajax Upload文件上傳插件就是純粹的JavaScript寫的，所以不依賴于任何的JavaScript庫(kù)，可以直接使用JavaScript實(shí)現(xiàn)多文件上傳。
5、在線Demo請(qǐng)勿上傳敏感的圖片，謝謝合作。
三、結(jié)語(yǔ)
這款A(yù)jax Upload多文件上傳插件還是很受用的，本文將原項(xiàng)目頁(yè)面內(nèi)容原封不動(dòng)的翻譯過(guò)來(lái)了，時(shí)間倉(cāng)促，翻譯或書寫可能有不準(zhǔn)確，歡迎留言指正。原項(xiàng)目的Demo頁(yè)面有些亂，所以我自己用JavaScript+php實(shí)現(xiàn)了非常精簡(jiǎn)的文件上傳演示頁(yè)面，希望對(duì)您有所幫助。
四、補(bǔ)充
不少人問(wèn)我，有沒(méi)有支持file類型input的方法。我今天想了想，改了改，實(shí)現(xiàn)了一個(gè)類似<input type=”file” />的效果。
首先，你需要調(diào)用修改后的JavaScript文件，點(diǎn)擊這里（右鍵下載）：修改版JS。
先看下效果，截自IE6：
原理如下，使用<input type=”text” id=”uploadUrl”> + <input type=”button”>的組合模擬<input type=”file” />的表現(xiàn)。然后，當(dāng)隱藏的file文件域發(fā)生改變的時(shí)候，讓其值等于<input type=”text”>的值就可以了。
具體效果您可以狠狠地點(diǎn)擊這里：效果demo
至于代碼部分，要在JavaScript的最后添加類似于下面的幾行代碼就可以了。
var oUrl = document.getElementById("uploadUrl"); //要顯示本地圖片路徑的文本框var oFile = document.getElementById("absFileInput");if(oFile){ oFile.onchange = function(){ oUrl.value = this.value; };}原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明來(lái)自張?chǎng)涡?鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=342
（本篇完）
如果您覺得本文的內(nèi)容對(duì)您的學(xué)習(xí)有所幫助：
標(biāo)簽： Ajax, html, input, javascript, JavaScript庫(kù), php, 上傳, 圖片上傳, 控件, 插件, 正則表達(dá)式, 翻譯
這篇文章發(fā)布于 2009年11月7日，星期六，03:02，歸類于 外文翻譯。 閱讀 66202 次, 今日 57 次
聯(lián)系客服
