返回列表 發帖

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!

那請問,如果有預設值的話,就是從server端取出檔名,那我該怎麼做才能把檔名和圖片弄進去?

TOP

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

TOP

回復 2# 的帖子

fileInputName: 'myfile' <---這是預設的
接收就用$_FILES['myfile'] 變數
不知道您是不是問這個?

TOP

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

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

TOP

此範例說明的不清不楚,伺服器端接收的DEMO程式簡直是開玩笑

TOP

這個範例很經典,以前要做到動態上傳,需要動很大的手腳
不然就是以flash來代替。
個人覺得,這篇的重點是在jQuery的應用,並不是在PHP等
後端程式的操作。
所以範例中,並沒有真正去處理檔案的接收,僅以簡單的回
傳結果代替。

TOP

有點卡關...

我想..上傳我是解決了..
可是刪除檔案呢ˊˋ?
上面X的部分可以內含傳送質嗎??
現在有點卡到...狀況是...選擇圖片>>上傳>>圖片進資料夾OK!!
                                          刪除圖片>>在使用者介面上..是刪除了...可是...資料夾裡面的圖片還在ˊˋ
...請問他能附加另外一之程式在裡面嗎??例如在哪邊加入...actionUrl:??

這支程式很庫@@!
這兩天番遍了大小網站...
只有他沒有用FLASH@@!

感謝版大的無私分享這程式...不然我擠破頭都想不出來....

TOP

回復 8# 的帖子

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

TOP

我現在將...上傳圖片的檔名轉成JSON
那刪除的時候是將JSON檔名叫出來嘛??
那我該在哪邊加入myImageUploader1.getFiles() ??
是在JSG.ImageUploader.js的var $deleteIcon.click(function()裡面ㄇ??
麻煩版大幫我解題了....
我是自學的所以JAVA很差ˊˋ

辛苦了ˊˋ...

TOP

返回列表 回復 發帖