咖啡屋

AJAX 多圖檔上傳範例 - 使用 jQuery 和 jQuery form

下載

您可以透過 Google Code Poject 取得最新原始碼。此外，您還需要兩個 jQuery 和 jQuery form plugin:

• jQuery
• jQuery form plugin

範例

圖檔上傳測試區，可上傳 4 張圖

 

 

已上傳完成：true
已上傳檔案：jsgiu-sample1.jpg,jsgiu-sample2.jpg,jsgiu-sample4.jpg

請隨意選取檔案上傳，這個範例不會真正處理後端的檔案上傳動作，但是可以展示上傳的前端流程和使用者看到的頁面。原理說明如下：

1. client 端 user 選取檔案後，透過 jquery form 同步即時上傳檔案
2. server 端的程式接收到檔案並處理後，若成功則回傳檔名，失敗則回傳錯誤訊息
3. client 端再根據回傳結果顯示訊息或處理圖檔預覽，並儲存已上傳成功的檔名
4. client 端的 UI 可以讓 user 刪除已上傳的檔案
5. 整個表單在送出前必須先確認是否仍有檔案正在上傳，若無，則可以取得已上傳成功的檔名再透過 hidden 的欄位 submit 給 server

解說

HTML

<div id="upload_block"> 
  <h2>圖檔上傳測試區，可上傳 4 張圖</h2> 
  <div id="preview_block"></div> 
  <div style="clear: both;"> 
    <span id="image_input_block"></span> 
  </div> 
</div>

其中 preview_block 是放預覽圖檔的地方，image_input_block 是放上傳檔案輸入框的地方。

CSS

<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>

CSS 的部份要設定給預覽圖檔用的樣式，您可以在此指定 width, height, border, background-color 等等。

JavaScript

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="jquery.form.js"></script> 
<script type="text/javascript" src="JSG.ImageUploader.js"></script> 
<script type="text/javascript"> 
$(function() { 
  myImageUploader1 = new JSG.imgUploader({ 
    fileLimits: 4, 
    actionUrl: 'demo.php', 
    inputContainer: 'image_input_block', 
    previewContainer: 'preview_block', 
    existImages: 'images/sample1.jpg,images/sample2.jpg' 
  }); 
}); 
</script>

JavaScript 要先引用 jQuery 及 jQuery form plugin，然後在 DOM Ready 事件內透過 new JSG.imgUploader() 建立上傳檔案的 UI，需傳入的必要參數為：

1. actionUrl: server 要處理上傳檔案的 url
2. inputContainer: 放預覽圖檔的地方
3. 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 端處理

處理上傳檔案時，可能需要判斷檔案大小、先以暫存目錄存放，並處理縮圖等等。處理完成後以 JSON 格式回傳結果，若成功則回傳檔名，若失敗則回傳錯誤訊息，以下是以 PHP 回傳的範例：

<?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() 來判斷是否檔案已傳送完畢：

if (!myImageUploader1.isReady()) { 
  alert('圖檔上傳中，請稍後再送出。'); 
  return false; 
}

若檔案已傳送完畢，可再透過 myImageUploader1.getFiles() 取得已上傳成功的檔案名稱，若有多個檔案，則預設以逗號 , 相隔。

$('#hiddenFileField').val(myImageUploader1.getFiles());

至於上傳後，Server 端需要再有機制來驗證並處理先前上傳的暫存檔等等，這部份的實作就要看實際運用的情況，不包含在本範例中，請大家自己玩玩囉。