webuploader是一個功能很強大的插件，但是在使用的時候遇到很多坑；記錄一下，方便下次使用，也希望能幫助一些新手；
1.下載wenuploader 插件
http://fex.baidu.com/webuploader/
2.不多BB 看代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="webupload/webuploader.css">
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="webupload/webuploader.min.js"></script>
</head>
<body>
<div id="uploadimg">
<div id="fileList" class="uploader-list"></div>
<div id="imgPicker">選擇圖片</div>
</div>
<script>
var uploader = WebUploader.create({
auto: true, // 選完文件後，是否自動上傳 如果是false 則需要submit 提交
swf: 'webupload/Uploader.swf', // swf文件路徑
server: 'upload.php', // 文件接收服務端
pick: '#imgPicker', // 選擇文件的按鈕。可選
// 只允許選擇圖片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
var $list = $("#fileList");//顯示上傳圖片的容器實例；
var thumbnailWidth = 200;//圖片寬高
var thumbnailHeight = 200;
uploader.on( 'fileQueued', function( file ) {
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'</div>'
),
$img = $li.find('img');
// $list爲容器jQuery實例
$list.append( $li );
// 創建縮略圖
// 如果爲非圖片文件，可以不用調用此方法。
// thumbnailWidth x thumbnailHeight 爲 100 x 100
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能預覽</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
</script>
</body>
</html>