WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代檔案上傳元件，比較好用，相容性也比較好；官方文件
廢話不多說，直接討論在專案中遇到的種種坑吧。

1.在一個html頁面有未知個地方需要上傳圖片；

var uploader = WebUploader.create({

    // swf檔案路徑
    swf: BASE_URL + '/js/Uploader.swf',

    // 檔案接收服務端。
    server: 'http://webuploader.duapp.com/server/fileupload.php',

    // 選擇檔案的按鈕。可選。
 

    // 內部根據當前執行是建立，可能是input元素，也可能是flash.
    pick: '#picker',

    // 不壓縮image, 預設如果是jpeg，檔案上傳前會壓縮一把再上傳！
    resize: false
});

官方文件初始化uploader 物件是這樣的，#picker就是頁面上需呼叫上傳元件的Id，假如有1~3個，也許可以將上面的程式碼寫上3遍，只要你不嫌麻煩，但是要碰到10個，用這種方法就有點想哭的衝動了，後來就想到下面的方法，每次重新例項化一個uploader物件，並且把需要呼叫上傳元件的控制元件Id傳遞過去；

function uploader
 
(domId){

    // swf檔案路徑
    swf: BASE_URL + '/js/Uploader.swf',

    // 檔案接收服務端。
    server: 'http://webuploader.duapp.com/server/fileupload.php',

    // 選擇檔案的按鈕。可選。
    // 內部根據當前執行是建立，可能是input元素，也可能是flash.
    pick: '#'+domId,

    // 不壓縮image, 預設如果是jpeg，檔案上傳前會壓縮一把再上傳！
    resize: false

    return uploader;
}

假如你需要上傳的控制元件都是動態生成的，這種情況你可以以隨機數設定控制元件Id的屬性，類似於；

 uploader("_upload_button_"+randomNum);

randomNum是一個隨機數；這樣的話，不管頁面有多少個需要上傳的控制元件都可以呼叫上傳圖片的元件啦。

2. fileQueued與filesQueued事件的區別

假如上傳的圖片放在一個佇列裡面，fileQueued事件是每有圖片新增到佇列裡面都會執行的，在這個事件裡面，可以處理圖片數量的疊加、圖片縮圖html的拼接；而filesQueued是在圖片選擇完後執行的，這個事件裡可以將之前拼接好的Html以某種形式展示，我在專案中使用的是artDialog彈框元件，參照文件連結

3. 移除上傳佇列裡面的圖片

好不容易將選擇圖片、圖片上傳弄好了，這時候產品過來跟你說，待上傳的圖片佇列裡面的圖片，需要支援選擇性的刪除，坑啊 ；這時候，可以呼叫fileDequeued事件

 uploader.on('fileDequeued', function(file){

        fileCount--;
        removeFile(file);

    });

4. 待上傳的圖片佇列裡支援重新選擇圖片上傳

假如你選擇了幾張圖片等待上傳，或者已經上傳完了幾張，在不關閉彈窗元件的前提下，想繼續新增圖片上傳，可以呼叫下面程式碼；

// 新增“新增檔案”的按鈕，
   uploader.addButton({
         id: '#continueUpload',
         label: '繼續上傳'
     });

上面id是需要呼叫上傳元件的控制元件的id，這樣的話，又可以繼續嗨皮的上傳圖片啦。