jsGears Image Uploader

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

下載

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

範例

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

已上傳完成：
已上傳檔案：

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

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

©2010 Virtual Design Studio - Contact