1. 程式人生 > >百度圖片上傳 webuploader外掛

百度圖片上傳 webuploader外掛

外掛描述: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: '繼續新增' });