圖檔上傳測試區,可上傳 4 張圖
已上傳完成:
已上傳檔案:
PS. 請隨意選取檔案上傳,此範例程式並不會真的處理上傳的圖檔
[原始檔及範例程式下載]
繁體中文版:JSG.ImageUploader.zh-tw.zip
簡體中文版:JSG.ImageUploader.zh-cn.zip
此外,這個程式用到了 jquery core 和 jquery form:
http://jquery.com/
http://www.malsup.com/jquery/form/
[原理說明]
- client 端 user 選取檔案後,透過 jquery form 同步即時上傳檔案
- server 端的程式接收到檔案並處理後,若成功則回傳檔名,失敗則回傳錯誤訊息
- client 端再根據回傳結果顯示訊息或處理圖檔預覽,並儲存已上傳成功的檔名
- client 端的 UI 可以讓 user 刪除已上傳的檔案
- 整個表單在送出前必須先確認是否仍有檔案正在上傳,若無,則可以取得已上傳成功的檔名再透過 hidden 的欄位 submit 給 server
[實作範例解說]
HTML 的部份:
<style type="text/css">
.JSGImgPreview {
float: left; background: url() no-repeat center 50% #FFFAD9;
width: 160px; height: 120px; border: solid 1px #0080FF; margin: 0 5px;
}
</style>
<div id="upload_block">
<h2>圖檔上傳測試區,可上傳 4 張圖</h2>
<div id="preview_block"></div>
<div style="clear: both;">
<span id="image_input_block"></span>
</div>
</div>
- Line2: JSGImgPreview 是給預覽圖檔用的 CSS,您可以在此指定 width, height, border, background-color 等等。
- Line9: preview_block 是放預覽圖檔的地方
- Line11: image_input_block 是放上傳檔案輸入框的地方
引用 JavaScript:
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript" src="JSG.ImageUploader.js"></script>
共三個檔案,jquery core、jquery form 以及 JSG.ImageUploader.js
JavaScript 的部份如下:
$(function() {
myImageUploader1 = new JSG.imgUploader({
fileLimits: 4,
actionUrl: 'demo_upload.php',
inputContainer: 'image_input_block',
previewContainer: 'preview_block',
existImages: '_lib/jsg/images/sample1.jpg,_lib/jsg/images/sample2.jpg'
});
});
client 端的程式相當簡單,在 DOM Ready 事件內透過 new JSG.imgUploader() 建立上傳檔案的 UI,需傳入的必要參數為:
- actionUrl: server 要處理上傳檔案的 url
- inputContainer: 放預覽圖檔的地方
- previewContainer: 放上傳檔案輸入框的地方
此外,還有其他額外的參數可以設定,請直接看以下的程式及相關說明:
var defConfig = {
fileLimits: 1, //圖檔數量的限制 (-1 是不限制)
actionUrl: null, //圖檔上傳的處理程式
fileInputName: 'myfile', //檔案輸入框的名稱
inputContainer: null, //檔案輸入框的放置位置
previewContainer: null, //預覽圖檔的放置位置
hideInputIfReachLimits: true, //達到檔案數量限制時是否隱藏輸入框,若否,則採用 disable
confirmDeleteMsg: '確認刪除?',
previewClass: 'JSGImgPreview',
elementPrefix: 'JSGImgUploader',
loadingIcon: 'images/loading_indicator_big.gif',
deleteIcon: 'images/icon_delete.gif',
outputDelimiter: ',', //1.1版後改為半形逗號
existImages: '', //1.1版後新增,可以放預設圖檔(已存在伺服器的圖檔)
uniqueId: null
};
至於 Server 端的程式(demo_upload.php),則要處理上傳檔案,可能需要判斷檔案大小、先以暫存目錄存放,並處理縮圖等等。處理完成後以 JSON 格式回傳結果,若成功則回傳檔名,若失敗則回傳錯誤訊息,以下是 Server 端的回傳範例:
<?php
/*
* 這個檔案需處理上傳並且回傳訊息給 client 端
* 1. 成功時回傳檔名,格式如下:
* {'success': 'filename.jpg'}
* 2. 失敗時回傳錯誤訊息:
* {'error': 'error message'}
*/
//隨機回傳成功或失敗
if (mt_rand(1, 3) != 1) {
//成功時回傳處理過後的檔名
$random = rand(1, 5);
$rtn = array('success' => 'images/sample'. $random .'.jpg');
} else {
//失敗時回傳錯誤訊息
$rtn = array('error' => 'upload file too big or something!');
}
echo json_encode($rtn);
?>
最後,當整個表單要送出前,需要先判斷是否仍有檔案上傳中,可透過 myImageUploader1.isReady() 來判斷是否檔案已傳送完畢:
alert(myImageUploader1.isReady());
若檔案已傳送完畢,可再透過 myImageUploader1.getFiles() 取得已上傳成功的檔案名稱,若有多個檔案,則預設以逗號 , 相隔。
alert(myImageUploader1.getFiles());
至於上傳後,Server 端需要再有機制來驗證並處理先前上傳的暫存檔等等,這部份的實作就要看實際運用的情況,不包含在本範例中,請大家自己玩玩囉。 |