$(function() {
/**
* 初始化Web Uploader
*/
var uploader = WebUploader.create({
swf : '../mobile/Uploader.swf',// swf檔案路徑
server : "/upload.do",// 檔案接收服務端。
auto : true,// 選完檔案後，是否自動上傳。
// 上傳引數列表(這裡可以暫時不寫，可以在點選按鈕時 uploader.options.formData = obj;)
formData : {
id : id,
name : name
},
// 指定選擇檔案的按鈕
pick : {
id : '#file',// 指定選擇檔案的按鈕的ID，class等
multiple : true,// 是否開起同時選擇多個檔案能力
innerHTML : "上傳"// 指定按鈕文字
},
// 指定接受哪些型別的檔案
accept : {
title : 'Images',
extensions : 'jpg,png,jpeg',
mimeTypes : 'image/*'
},
// 配置生成縮圖的選項(可不寫)
thumb : {
// 縮圖的寬高，當取值介於0-1時，被當成百分比使用
width : 500,
height : 250,
// 強制轉換成指定的型別
type : "image/jpeg",
// 圖片質量，只有type為image/jpeg的時候才有效
quality : 70,
// 是否允許放大，如果想要生成小圖的時候不失真，此選項應該設定為false
allowMagnify : true,
// 是否允許裁剪
crop : true
},


// 是否壓縮圖片, 預設如果是jpeg檔案上傳前會壓縮，如果是false, 則圖片在上傳前不進行壓縮
// compress:false,
compress : {
// 壓縮後的尺寸
width : 100,
height : 100,
// 圖片質量，只有type為image/jpeg的時候才有效。
quality : 90,
// 是否允許放大，如果想要生成小圖的時候不失真，此選項應該設定為false
allowMagnify : false,
// 是否允許裁剪
crop : false,
// 是否保留頭部meta資訊
preserveHeaders : true,
// 如果發現壓縮後文件大小比原來還大，則使用原來圖片，此屬性可能會影響圖片自動糾正功能
noCompressIfLarger : false,
// 單位位元組，如果圖片大小小於此值，不會採用壓縮
compressSize : 0
},
duplicate : false,// 不允許重複上傳
resize : false,// 尺寸不改變
method : 'POST',// 檔案上傳方式，POST或者GET，預設值：'POST'
disableGlobalDnd : true,// 是否禁掉整個頁面的拖拽功能
fileNumLimit : 50,// 每次上傳檔案數
fileSizeLimit : 1000 * 1024 * 1024,// 每次上傳檔案的大小總和
fileSingleSizeLimit : 20 * 1024 * 1024,// 單個上傳檔案的大小
threads : 10,// 上傳併發數。允許同時最大上傳程序數。


});


/**
* 點選上傳按鈕
*/
//$("#file").click(function() {
//$(".webuploader-element-invisible").click();
//})


/**
* 點選上傳按鈕
*/
$("#file").on('click',function(event){

//var obj = new Object();
//obj.id = id;
//obj.name = name;
//uploader.options.formData = obj;

//手動上傳
uploader.upload();
//手動停止
uploader.stop();

});


/**
* 先執行此方法
*/
uploader.on('all', function (type) {
        if (type === 'beforeFileQueued') {
           //當檔案被加入佇列之前觸發
        } else if (type === 'fileQueued') {
            //當檔案被加入佇列以後觸發(加一個檔案就觸發一次)
        } else if (type === 'filesQueued') {
            //當一批檔案新增進佇列以後觸發(當所有檔案都加完後觸發)
        } else if (type === 'fileDequeued') {
        //當檔案被移除佇列後觸發
        } else if (type === 'reset') {
        //當 uploader 被重置的時候觸發
        } else if (type === 'startUpload') {
        //當開始上傳流程時觸發
        } else if (type === 'stopUpload') {
        //當開始上傳流程暫停時觸發。
        } else if (type === 'uploadFinished') {
        //當所有檔案上傳結束時觸發。
        } else if (type === 'uploadStart') {
        //某個檔案開始上傳前觸發，一個檔案只會觸發一次。
        } else if (type === 'uploadProgress') {
        //上傳過程中觸發，攜帶上傳進度。
        } else if (type === 'uploadError') {
        //當檔案上傳出錯時觸發。
        } else if (type === 'uploadSuccess') {
        //當檔案上傳成功時觸發。
        } else if (type === 'uploadComplete') {
        //不管成功或者失敗，檔案上傳完成時觸發
        } else if (type === 'error') {
        //當validate不通過時，會以派送錯誤事件的形式通知呼叫者
        }         
    });

/**
* 開始上傳
*/
uploader.on('startUpload', function() {
//console.log("開始上傳:startUpload");
})


/**
* 把上傳的圖片加入佇列
*/
uploader.on('fileQueued', function(file) {
var $li = $('<div class="picbox"><div class="loading"></div>'
+ '<div class="pop_mask"></div><div class="num" id='
+ file.id + '>ok</div></div>');
$(".piclist ").append($li);
uploader.makeThumb(file, function(error, src) {
if (error) {
$img.replaceWith('<span>不能預覽</span>');
return;
}
$li.attr('style', "background-image:url(" + src + ");");
}, 200, 200);
})


/**
* 上傳過程中監視上傳檔案是否符合條件 
*/
uploader.on("error", function(code) {
if (code == "Q_EXCEED_NUM_LIMIT") {
loading = layer.msg('一次上傳的檔案不能多於50張', {
icon : 7,
shade : 0.01,
time : 1000
});
}
if (code == "F_EXCEED_SIZE") {
loading = layer.msg('檔案大小不能大於20M', {
icon : 7,
shade : 0.01,
time : 1000
});
}
if (code == "Q_EXCEED_SIZE_LIMIT") {
loading = layer.msg('一次上傳所有檔案總大小不能大於1000M', {
icon : 7,
shade : 0.01,
time : 1000
});
}
if (code == "Q_TYPE_DENIED") {
loading = layer.msg('上傳檔案型別只支援jpg,png,jpeg格式', {
icon : 7,
shade : 0.01,
time : 1000
});
}
if (code == "F_DUPLICATE") {
loading = layer.msg('上傳檔案有重複', {
icon : 7,
shade : 0.01,
time : 1000
});
}
});


    /**
     * 上傳進度條
     */
uploader.on( 'uploadProgress', function( file, percentage ) {
//console.log(file.id);
var $progress = $( '#'+file.id );
var $progressNum = $progress.find(".mb5");
var $progressBar = $progress.find(".progressBar");
    // 避免重複建立
    if ( !$progressBar.length ) {
        $percent = $('<p class="progressBar"><span></span></p>')
                .appendTo( $("#"+file.id).parent())
                .find('span');
    }
    $progressBar.css( 'width', percentage * 100 + '%' );
    $progressNum.text(percentage * 100+'%');
});

/**
* 上傳成功
*/
uploader.on('uploadSuccess', function(file, ret) {


if (ret.success == true) {// 正常


} else {
$("#" + file.id).parent().remove();
alert(file.name + "上傳失敗，請選擇其他照片。");
return;
}


var data = {};
var response = "{\"picId\":\"" + ret.picId + "\",\"width\":\""
+ ret.width + "\",\"height\":\"" + ret.height
+ "\",\"filePath\":\"" + ret.filePath + "\"}\r\n";
data["from"] = from;
data["text"] = response;
data["to"] = "PC_" + webuuid;
websocket.send(JSON.stringify(data));


});


/**
* 上傳失敗
*/
uploader.on('uploadError', function(file) {
layer.open({
    title:"溫馨提示",
    content:"上傳圖片不符合要求"
    });
$("#" + file.id).parent().remove();
})
/**
* 上傳失敗或成功都會執行
*/
uploader.on('uploadComplete', function(file) {
$("#" + file.id).parent().find(".loading").remove();
$("#" + file.id).parent().find(".pop_mask").remove();
})


uploader.on('uploadFinished', function() {
$(".loading").each(function() {
$(this).parent().remove();
});
$("#pop_mask").hide();
$("#noti").hide();
uploader.reset();
});


function hashString(str) {
var hash = 0, i = 0, len = str.length, _char;
for (; i < len; i++) {
_char = str.charCodeAt(i);
hash = _char + (hash << 6) + (hash << 16) - hash;
}
console.log("hashcode:" + hash);
return hash;
}

})

注：本文是自己總結，如有錯誤敬請諒解，評論指出錯誤，共同進步，共勉，謝謝。