jquery檔案上傳外掛程式：upload無重新整理AJAX進度多檔案批量上傳樣本

1、外掛程式說明

在支援FormData的瀏覽器完全使用AJAX（即XMLHttpRequest）和input的files屬性共同完成上傳檔案，否則就類比表單提交來上傳檔案。支援寫的文章和指令碼現在看起來都比較稚嫩，現在重新整理、約束，更好的API和便捷使用方法。

外掛程式名稱：jquery-upload。

2、外掛程式使用

// 1、判斷瀏覽器支援特徵
// 是否支援HTML5的input的files對象，用於同時選擇上傳多張圖片
$.support.inputFiles;
// 是否支援HTML5的FormData，用於AJAX提交
$.support.formData;

// 2、預設參數
$.fn.upload.defaults = {
    // 提交地址
    action: "",
    // 傳遞額外資料（索引值對字串）
    data: null,
    // 表單檔案的name值
    inputName: "file",
    // 檔案最小容量（單位B，預設0）
    minSize: 0,
    // 檔案最大容量（單位B，預設1M=1024KB=1024*1024B）
    maxSize: 1048576,
    // 檔案類型（檔案尾碼）
    fileType: ["png", "jpg", "jpeg", "gif"],
    // 錯誤訊息提示
    errorMsg: {
        // 單檔案上傳錯誤或失敗
        singleError: "第{n}個檔案上傳錯誤或失敗",
        // 多檔案上傳錯誤或失敗
        multiError: "上傳錯誤或失敗",
        // 單檔案未選擇
        singleNone: "尚未選擇第{n}個上傳檔案",
        // 多檔案未選擇
        multiNone: "尚未選擇任何上傳檔案",
        // 多檔案清單為空白
        empty: "待上傳檔案為空白",
        // 單、多檔案錯誤，{n}表示該檔案的序號，開始序號為1
        type: "第{n}個檔案類型不符合要求",
        size: "第{n}個檔案容量不符合要求"
    },
    // 完成回調，無論成功還是失敗
    oncomplete: emptyFn,
    // 成功回調
    onsuccess: emptyFn,
    // 失敗回調
    onerror: emptyFn,
    // 進度回調
    onprogress: emptyFn
};

// 3、上傳檔案
$("#file").upload({
    action: "upload.php"
});

// 4、增加檔案MIME配對關係
// 添加單個
$.fn.upload.addTypeRelationship("text/html", "html");
// 添加多個
$.fn.upload.addTypeRelationship({
    "text/html": "html",
    "text/xhtml": "xhtml"
});