百度圖片上傳 webuploader外掛
阿新 • • 發佈:2019-02-11
外掛描述:WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主,FLASH為輔的現代檔案上傳元件。
它的一些用法:
uploader.addButton({
id: '#filePicker2',
label: '繼續新增'
});
id: ‘#filePicker2’是寫你要新增圖片的id
jQuery(function() {
var $ = jQuery, // just in case. Make sure it's not an other libaray.
$wrap = $('#uploader'),
// 圖片容器
$queue = $('<ul class="filelist"></ul>')
.appendTo( $wrap.find('.queueList') ),
// 狀態列,包括進度和控制按鈕
$statusBar = $wrap.find('.statusBar'),
// 檔案總體選擇資訊。
$info = $statusBar.find('.info'),
// 上傳按鈕
$upload = $wrap.find('.uploadBtn'),
// 沒選擇檔案之前的內容。
$placeHolder = $wrap.find('.placeholder'),
// 總體進度條
$progress = $statusBar.find('.progress').hide(),
// 新增的檔案數量
fileCount = 0,
// 新增的檔案總大小
fileSize = 0,
// 優化retina, 在retina下這個值是2
ratio = window.devicePixelRatio || 1 ,
// 縮圖大小
thumbnailWidth = 110 * ratio,
thumbnailHeight = 110 * ratio,
// 可能有pedding, ready, uploading, confirm, done.
state = 'pedding',
// 所有檔案的進度資訊,key為file id
percentages = {},
supportTransition = (function(){
var s = document.createElement('p').style,
r = 'transition' in s ||
'WebkitTransition' in s ||
'MozTransition' in s ||
'msTransition' in s ||
'OTransition' in s;
s = null;
return r;
})(),
// WebUploader例項
uploader;
if ( !WebUploader.Uploader.support() ) {
alert( 'Web Uploader 不支援您的瀏覽器!如果你使用的是IE瀏覽器,請嘗試升級 flash 播放器');
throw new Error( 'WebUploader does not support the browser you are using.' );
}
// 例項化
uploader = WebUploader.create({
pick: {
id: '#filePicker',
label: '點選選擇圖片'
},
dnd: '#uploader .queueList',
paste: document.body,
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
// swf檔案路徑
swf: BASE_URL + '/js/Uploader.swf',
disableGlobalDnd: true,
chunked: true,
// server: 'http://webuploader.duapp.com/server/fileupload.php',
server: 'http://2betop.net/fileupload.php',
fileNumLimit: 300,
fileSizeLimit: 5 * 1024 * 1024, // 200 M
fileSingleSizeLimit: 1 * 1024 * 1024 // 50 M
});
// 新增“新增檔案”的按鈕,
uploader.addButton({
id: '#filePicker2',
label: '繼續新增'
});