Multiple File Upload by AjaxFileUpload of jQuery

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 測試