返回列表 發帖

AJAX 多圖檔上傳範例 (使用 jquery core, jquery form)

2009-05-16 更新為 v1.1 版


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

不好意思,目前這個版本有點舊了,沒有提供預設值的功能,我晚一點把新版本放上來。
To infinity and beyond!

TOP

版本升級為 v1.1 了,多了一個參數 existImages 可以設定預設的圖檔,多個圖檔則以半形逗號分隔。

回覆 darklit :
btons 指的應該是當資料編輯時,Server 端已存在之前上傳的圖檔,這時應該要先顯示出來。
To infinity and beyond!

TOP

回復 8# 的帖子

關於刪除圖片的部份,可以這樣做:
選擇圖片>>上傳>>圖片進資料夾>>圖檔檔名也儲存下來(A.JPG,B.JPG)
刪除圖片>>送出時將 myImageUploader1.getFiles() 的值一併送出>>server 端比對剩下的檔案即可得知哪些是刪除的
To infinity and beyond!

TOP

回復 10# 的帖子

得看你的實做流程喔。這個範例在我原本的想法中,只是一個表單內負責圖片的一小部份,會在原本的表單送出前,先將 myImageUploader1.getFiles() 存放到一個 hidden 的欄位後送出。

如果你單純用這個程式來上傳圖片的話,得再想想在哪個時機把 myImageUploader1.getFiles() 的資料送到 server 端比較適合。
To infinity and beyond!

TOP

不是喔,我原始的設計是個 library 的形式給其他人套用,你不用修改到我提供的 JavaScript,所以不需要瞭解內部運作流程,也不用修改 X 的按鈕的動作。

這個 library 會協助你作圖檔的上傳,並且提供你訊息說 UI 的操作後有哪些檔案,你在最後整個表單送出時,同時將這個訊息送到 server 端處理即可。

我想你可能會需要另一個按鈕,讓 user 做「完成編輯」這樣的動作,在這個按鈕按下後再將訊息送到 server 端。
To infinity and beyond!

TOP

你可以在表單送出前在 onsubmit 事件內去做
<form onsubmit="return checkForm(this)">
<input type="hidden" name="pics" />
function checkForm(fm) {
  fm.elements['pics'].value = myImageUploader1.getFiles();
  //其他表單檢查...
}
To infinity and beyond!

TOP

請用 client 端開發工具檢查 server 回應的格式是否正確。

正確的回應應該是一組 JSON 的字串如下:
echo json_encode(array('success' => 'http://example.com/img/xxx.jpg'));
To infinity and beyond!

TOP

如果有安裝 firebug,可以看看由  server 回傳的結果是否為正確的 json 格式,如下圖:



或是直接逐行偵錯,也可以看到哪裡出了問題。

很可能是 server 端有回應其他錯誤訊息,導致整個格式錯誤了。
To infinity and beyond!

TOP

可以啊,縮圖是 server 端自行實做的。
To infinity and beyond!

TOP

返回列表 回復 發帖