Multiple File Upload by AjaxFileUpload of jQuery

Posted by essoduke - 2008 年 04 月 25 日 20:44:44 - 5,643 User Views
 

AjaxFileUpload 是 jQuery 的擴充套件之一，可以使用 Ajax 來即時上傳檔案，不過缺點就是一次只能上傳一個。

但是今天在研究 Multiple File Upload 搭配 AjaxFileUpload 時，找到一個土法煉鋼的方式可以達成一次上傳多個檔案。

這是 AjaxFileUpload 原本的使用方法：

  1. $.ajaxFileUpload ({
  2.         url:'doajaxfileupload.php',
  3.         secureuri:false,
  4.         fileElementId:'fileToUpload',
  5.         dataType: 'json',
  6.         success: function (data, status){
  7.             if(typeof(data.error) != 'undefined'){
  8.                 if(data.error != ''){
  9.                     alert(data.error);
  10.                 }else{
  11.                     alert(data.msg);
  12.                 }
  13.             }
  14.         },
  15.         error: function (data, status, e){
  16.             alert(e);
  17.         }
  18. });

土法煉鋼法就是利用 Multiple File Upload plugin 所建立的 Array 讓上述過程跑 n 次… XD

  1. //取得 uploads 表單內，input 類型為 file 表單元素並依序執行迴圈
  2. $('input:file', $('#uploads')).each(function(){
  3.   $.ajaxFileUpload({
  4.         url:'doajaxfileupload.php',
  5.         secureuri:false,
  6.         //重點就是這行，依序傳入 file 表單元素的 id 值
  7.         fileElementId:$(this).attr("id"),
  8.         dataType: 'json',
  9.         success: function (data, status){
  10.           //後端處理回傳 json...
  11.         },
  12.         error: function (data, status, e){
  13.             alert(e);
  14.         }
  15.     });
  16. });

目前測試使用上都沒有問題，下一個實做就是要像 GMail 的夾帶檔案一樣，讓已選取上傳的檔案清單可以在點選 remove 時移出清單，同時也刪除已上傳的檔案…

DEMO 測試

延伸閱讀：

Technorati Tags: , ,

回首過往今日

標籤： , ,

相關文章

5 則迴響 »

本篇文章迴響的訂閱源料。 TrackBack URI

  1. Internet Explorer 6.0 Windows XP

    你好~我目前有個需求就是我想讓使用者大量選一些檔案
    我選上了你所介紹的，可是主要我也是jquery的新手
    其實只會套用，我想請教你一下，就是我不需要上傳
    我只需要能選完檔案 然後逐筆把檔名讀出…我試過
    你demo的 我能印出第一筆 迴圈跑不出來><
    不知可提示或教導一下嗎？ 感謝^^

    迴響 by 竹竿 — 2008 年 10 月 17 日 #

    Internet Explorer 6.0 Windows XP
  2. Mozilla Firefox 3.0.3 Windows XP

    我猜你的意思是單一個檔案瀏覽框的情況之下列出所有選取的檔案名稱？

    那上述例子得修改為：

    // .file 是 Multifile Plugin 所建立的檔案清單容器的 Class Name
    $(‘.file’).each(function(){
    document.write($(this).html());
    });

    完整範例請參考：
    http://my.essoduke.org/files/demo/upload.htm

    迴響 by essoduke — 2008 年 10 月 17 日 #

    Mozilla Firefox 3.0.3 Windows XP
  3. Internet Explorer 7.0 Windows Vista

    您好，我試過您的這個ideal，得確可以在firefox上正常使用，不過在ie 7時就怪怪的了，不能正常的上傳成功，請問這是什麼原因呢？

    迴響 by mark — 2008 年 11 月 20 日 #

    Internet Explorer 7.0 Windows Vista
  4. Mozilla Firefox 3.0.4 Windows XP

    是否有出現 javascript error 呢？
    可能要請您列出程式碼或提供 demo 才能進一步瞭解了…

    迴響 by essoduke — 2008 年 11 月 20 日 #

    Mozilla Firefox 3.0.4 Windows XP
  5. Mozilla Firefox 3.0.14 Windows Server 2003

    你這樣的寫法不是很完美,

    你測試一下, 如果你所有的檔案都丟 好幾MB上去,

    第一個檔案才剛開始上傳，第二個檔案又接著對server做request,

    然後第三…第四個檔..一直接著來對server做request.

    第一個檔案還沒上傳好, 後面一直來request,

    有可能上傳的動作會被miss掉,or失敗.

    建議：

    較好的寫法是，第一個檔案上傳完後, 接著傳下一個.

    可寫在success: 裏面, 上傳下一個檔案.

    迴響 by jen — 2009 年 10 月 16 日 #

    Mozilla Firefox 3.0.14 Windows Server 2003

發表迴響

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Powered by WordPress with GimpStyle Theme design by Horacio Bella.
Entries and comments feeds. Valid XHTML and CSS.