|
by zhangxinxu from http://www. 一,、以下為項目主頁正文翻譯（包括代碼注釋的翻譯）： 1,、Ajax Upload上傳插件 瀏覽器迫使我們使用文件輸入控件(<input type=”file” />)做上傳，然而此控件的樣式是不能修改的,。此外,，基于表單上傳在流行的Ajax應用程序面前顯得過時了。我們可以使用flash解決這個問題,，但實際上JavaScript也能做的很出色,。 Ajax Upload文件上傳插件允許你上傳多個插件而無需刷新頁面，可以使用任何的元素來顯示文件選擇窗口,。它可以在所有主流的瀏覽器下工作,，從2.0版本開始，不需要任何庫運行,。Ajax Upload文件上傳插件不會污染任何命名空間,，所以它與jQuery，Prototypejs,，mootools其他JavaScript庫兼容,。 Demo實例 下載 問題,，貢獻和最新版本 2、如何去使用它,？ 創(chuàng)建上載 <div id=”upload_button”>上傳</div> 接下來,，您應該創(chuàng)建Ajax上傳實例,。您可以使用以下代碼創(chuàng)建最簡單的形式： // 您必須在 DOM 準備好之后在創(chuàng)建它 //在jquery下使用 $(document).ready // prototype下為document.observe(“dom:loaded” new AjaxUpload(‘upload_button_id’, {action: ‘upload.php’}); 配置Ajax上傳 new AjaxUpload(‘#upload_button_id’, { // 服務器端上傳腳本 // 注意: 文件不允許上傳到另外一個域上 action: ‘upload.php’, // 文件上傳的名字 name: ‘userfile’, // 發(fā)送的附加數(shù)據(jù) data: { example_key1 : ‘example_value’, example_key2 : ‘example_value2′ }, // 篩選后提交文件 autoSubmit: true, // 您希望從服務器返回的數(shù)據(jù)類型 // HTML (text) 和 XML 自動檢測 // 當您使用JSON作為響應時很實用，在這種情況下就設置為 “json” // 也要設置服務器端的響應類型為text/html, 否則在IE6下是不工作的 responseType: false, // 文件選擇后使用 // 當autoSubmit為disabled時很管用 // 您可以通過返回false取消上傳 // @參數(shù)file為上傳文件的文件名 // @參數(shù)extension為那個文件（后綴名） onChange: function(file, extension){}, // 文件上傳時調用 // 您可以通過設置返回false 取消上傳 // @參數(shù)file為上傳文件的文件名 // @參數(shù)extension為那個文件（后綴名） onSubmit: function(file, extension) {}, // 當文件上傳完成的時候調用 // 警告,！不要使用”false”字符串作為服務器的響應 // @參數(shù)file 指上傳的文件名 // @參數(shù) response 指服務器的響應 onComplete: function(file, response) {} }); 注意：不要使用數(shù)據(jù)參數(shù)附加動態(tài)數(shù)據(jù),，就像“data: (txt:textfield.value）”，因為它將在AJAX Upload實例創(chuàng)建的時候分配數(shù)據(jù)且以后不會改變,。如果你想文本框的傳遞的其他數(shù)據(jù),，使用在onSubmit回調函數(shù)中的SetData方法。 實例方法 //您可以使用這些方法來配置AJAX的上傳 var upload = new AjaxUpload(‘#div_id’,{action: ‘upload.php’}); //例如當用戶選擇了一些東西,，設置一些參數(shù) upload.setData({‘example_key’: ‘value’}); //或者您可以在事件函數(shù)中直接使用這些方法 new AjaxUpload(‘div_id’, { action: ‘upload.php’, onSubmit: function() { //僅允許一個上傳 this.disable(); } }); }); 3,、如何訪問上載的文件？ 您可以訪問其他一些參數(shù)通過： 服務器端腳本 $uploaddir = ‘/var/www/uploads/’; $uploadfile = $uploaddir . basename($_FILES['userfile']['name']); if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) { ColdFusion的文件上傳,。 （默認準系統(tǒng)解決方案） <cffunction name=”uploadFile” access=”remote” output=”false”> <cfargument name=”userFile”> <cffile action=”upload” fileField=”userFile” destination=”directory/path/on/server/”> <cfreturn “whatever”> </cffunction> 這里是一個ASPX處理程序,，請進行修改以滿足您的需要： using System; 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、如何只允許某些文件類型,？ new AjaxUpload(‘#button2′, { action: ‘upload.php’, onSubmit : function(file , ext){ if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ // 擴展名不允許 alert(‘錯誤：無效的文件擴展名！’); // 取消上傳 return false; } } }); 5,、如何工作的,？ 6,、授權與使用條款 二,、我使用php制作的最簡單的圖片上傳使用演示 首先，看圖,，簡述操作,。 代碼請參考Demo或源文件,。 您可以狠狠地單擊這里：中文Demo頁面 | 精簡版源文件下載 說明： 三,、結語 四,、補充 先看下效果,，截自IE6： 原理如下,，使用<input type=”text” id=”uploadUrl”> + <input type=”button”>的組合模擬<input type=”file” />的表現(xiàn)。然后,，當隱藏的file文件域發(fā)生改變的時候,，讓其值等于<input type=”text”>的值就可以了。 具體效果您可以狠狠地點擊這里：效果demo 至于代碼部分,，要在JavaScript的最后添加類似于下面的幾行代碼就可以了,。 var oUrl = document.getElementById("uploadUrl"); //要顯示本地圖片路徑的文本框
var oFile = document.getElementById("absFileInput");
if(oFile){
oFile.onchange = function(){
oUrl.value = this.value;
};
}原創(chuàng)文章，轉載請注明來自張鑫旭-鑫空間-鑫生活[http://www.] （本篇完） 如果您覺得本文的內(nèi)容對您的學習有所幫助： 相關文章
標簽： Ajax, html, input, javascript, JavaScript庫, php, 上傳, 圖片上傳, 控件, 插件, 正則表達式, 翻譯
|
|
|
