返回列表 發帖

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!

請問如果要改成支援HTML5的input multiple屬性多檔上傳,要如何修改?
主要是希望能一次就選擇多個檔案,而不是一次選擇一個上傳
我對javascript的知識學習還不夠,所以不太確定如何修改,
目前只有在插入新的input的地方加上multiple屬性,接下來的部分就不知道了
謝謝

TOP

本帖最後由 vsceo 於 2011-3-17 09:09 編輯

十分谢谢,已解决。

好像没有上传之前没有检查文档的扩展名?

返回失败信息也不能显示或提示出来。

因为对jquery实在不懂,所以只能假手与人,还请版主帮忙。

TOP

回復 44# vsceo

應該是 form plugin 的問題
早期版本的 form plugin 用了以下的 selector:
$(':input[@name=submit]', form).length
新版的 jQuery 不再使用 @
所以把上面那一行的 @ 拿掉即可。

或是找新版的 form plugin 取代掉也行。
To infinity and beyond!

TOP

因为对jQuery不懂,但是有应用到这个,我改回jQuery 1.2.6,我本来的程序提示错误,我用jQuery 1.5.1 套用你的插件又提示Error: Form elements must not be named "submit"错误。


求解,谢谢

TOP

thanks 4 sharing

TOP

demo.php  怎么才能接收到 提交的文件名来编写真正的上传程序啊

TOP

能不能将demo.php 实例化啊。不要只给个 demo样子啊 。

TOP

版大您好,我是剛學做網頁的新手@@~
   我直接抓下範例做測試,但出現和 小煒 一樣的情況。
      另外 如果要在此範例加上 縮圖的功能要如何做修改呢
     謝謝您耐心看完 問

TOP

版大 您好~  我是使用 DreamWeaver cs4 來編緝網頁的
   請問您的程式要如何套用到DW 上呢

TOP

返回列表 回復 發帖