Skip to content
Categories: , 

Multiple File Upload by AjaxFileUpload of jQuery

Post date:
Author:
Tags: , , 

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

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

這是 AjaxFileUpload 原本的使用方法：

$.ajaxFileUpload ({
        url:'doajaxfileupload.php',
        secureuri:false,
        fileElementId:'fileToUpload',
        dataType: 'json',
        success: function (data, status){
            if(typeof(data.error) != 'undefined'){
                if(data.error != ''){
                    alert(data.error);
                }else{
                    alert(data.msg);
                }
            }
        },
        error: function (data, status, e){
            alert(e);
        }
});

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

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

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

DEMO 測試

延伸閱讀：

讀過幾年書，塵世中的迷途大叔。

Comments

  • 竹竿

    says:

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

  • mark

    says:

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

  • jen

    says:

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

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

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

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

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

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

    建議：

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

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