Wabow Information Inc. Blog
官網: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上傳檔案設定,功能上可自行再增加,如圖片大小的判斷,上傳過程中的畫面顯示等等。