webuploader的優(yōu)點是幾乎支持所有的平臺坝疼，pc端支持ie6+仰担，支持IOS和Android,它可以自動壓縮圖片（僅支持jpeg吹零，在某些參數設置下用肉眼不能看出壓縮之后的差別席函，最多可縮小60倍）炮姨，生成base64地址編碼，能根據平臺自動切換flash或H5上傳如庭。
通常情況下叹卷，需要給一個特定div綁定一個onclick事件，當然這些都是webUploader內部完成的坪它。先看主要代碼：
var server = r.host;
var swf = 'http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf';
var object = '';
var base64Src = '';
var uploader = WebUploader.create({
auto: true,
swf: swf,
server: server,
pick: domId,
duplicate:true,
compress:{
width: 800,
height: 800,
quality: 90,
allowMagnify: false,
crop: false,
preserveHeaders: true,
noCompressIfLarger: false,
compressSize: 50
},
thumb:{
width: 800,
height: 800,
quality: 70,
allowMagnify: true,
crop:false,
type: 'image/jpeg'
},
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/jpg,image/jpeg,image/png'
}
});
uploader.on( 'fileQueued', function( file ) {
var loading = layer.load(2);
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
alert('不能預覽');
layer.close(loading);
}else{
base64Src = src;
previewCallback(src);
layer.close(loading);
}
});
});
uploader.on('uploadBeforeSend', function (obj, data, headers) {
delete r.host;
data = $.extend(data,r);
data.key = object = data.key + '/' + uuid(16) + '.jpg';
headers['Access-Control-Allow-Origin'] = "*";
});
uploader.on( 'uploadSuccess', function( file,response ) {
$.post(bao.dealWithObject,{object:object},function(r){
if(r.code == 1){
setCallback(r.data);//image_id
mergeCallback(base64Src, r.data);
}
});
});
uploader.on( 'uploadError', function( file ) {
alert('上傳圖片失敗骤竹，請重試');
});
看以看到，webUploader把選擇往毡、預覽蒙揣、上傳幾個步驟分開了，要分別寫到不同的函數里卖擅。這里有一個技巧鸣奔，就是預覽和上傳分開墨技，這樣用戶看到圖片的速度會很更快惩阶，而圖片在另一個函數里異步上傳，用戶是沒有感知的扣汪。
webUploader如果能結合OSS或者7牛断楷，可以直接把圖片上傳到圖片服務器，將不會占用應用服務器的貸款和性能崭别。
這需要一個驗簽過程冬筒，具體辦法是每次上傳的時候去應用服務器取得簽名，然后作為參數和圖片一起上傳到圖片服務器茅主。關鍵代碼：
$.post(signatureUrl,{},function(r){
if(r.code === 0){
alert(r.msg);
}else{
var signature = {
'key' : r.dir,
'policy': r.policy,
'OSSAccessKeyId': r.accessid,
'success_action_status' : '200',
'signature': r.signature,
'host': r.host
};
callback(signature);
}
});
可能不同的服務商代碼不太一樣舞痰，原理是相似的。這里也有一些技巧诀姚，比如把緩存時間設置成一個可接受的值响牛，在一段時間內不用重復取值。
最后赫段，有時候我們不想把選擇圖片的動作綁定到一個div上呀打，或者我們上傳的代碼已經寫好，只需要重構就可以了糯笙，這個時候我們需要用js觸發(fā)上傳圖片的動作贬丛。
嘗試過調用picker下的div，沒有作用给涕，也去github上提過issues豺憔，但是沒有回應额获。無意中發(fā)現(xiàn)可以這樣解決：
<button onclick='trigger()'>trigger</button>
<button id="picker" style="display:hone">picker</button>
<script>
var uploader = WebUploader.create({
auto: true,
swf: swf,
server: server,
pick: '#picker'
});
function trigger(){
$('#picker').find('input').click();
}
</script>
這樣就可以觸發(fā)選擇圖片的動作了，也就是說恭应，可以用js觸發(fā)咪啡，但是，總得有鼠標點一下暮屡。
