[jQuery] ajaxFileUpload Plugin

分類: jQuery|技術分享 作者: abu

22 五月 2009

官網:http://www.phpletter.com/Our-Projects/AjaxFileUpload/
範例:http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

在製作客戶需求的表單時,常會遇到上傳圖片的需求,因為要在同一頁編輯資料,通常會採取另開視窗,完成上傳動作後,再回到原本編輯頁面,繼續完成編輯,而拜ajax所賜,上傳檔案可以更加便利了。  (其實是這次期交所郵件附加檔案要用的)

ajaxFileUpload是一個jQuery Plugin,套用上也是相當簡便,只需特別設定處理上傳檔案的後端程式即可

直接來看用法吧~

1. 載入jQuery和ajaxFileUpload

<script src="jquery.js" type="text/javascript"></script>
<script src="ajaxFileUpload.js" type="text/javascript"></script>

2.綁定某個你想要執行ajax上傳檔案功能的按鈕,以及設定ajaxFileUpload上傳

 
$(function(){
 
$.ajaxFileUpload
        (
            {
                url:'doajaxfileupload.php', ,
                fileElementId:'fileToUpload',
                success: function ()
                {     
                      alert('上傳成功');           
                }
            }
        )
 
        return false;
 
}  
 
 
})

3.html碼

<input id="fileToUpload" type="file" />
<input id="uploadButton" type="button" value="上傳" />

4.後端處理PHP (範例為doajaxfileupload.php)

<php
copy($_FILES['fileToUpload'],$targetFile);
?>

以上就完成了簡易的ajax上傳檔案設定,功能上可自行再增加,如圖片大小的判斷,上傳過程中的畫面顯示等等。

我要留言

關於這裡

這個部落格分享了哇寶在電子商務領域的技術及資訊,希望能讓更多人一起為台灣的網路產業加油。