上傳外掛webuploader.js的使用示例
阿新 • • 發佈：2019-01-24
注意：
一定要注意swf檔案的位置，因為如果swf引用路徑錯誤的話，瀏覽器不會報錯
測試swf必須放在外網，本地伺服器沒用
可以使用runtimeOrder: 'flash',配置項強制瀏覽器使用swf方式
fileNumLimit: 1,配合uploader.reset();可以實現限制單次上傳的數量，並且不影響下一次的上傳
自定義上傳按鈕的樣式，關鍵要修改.webuploader-pick{padding:xx;background:xx;}
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" href="css/webuploader.css"> <script src="../js/jquery-1.11.3.min.js"></script> <script src="js/webuploader.min.js"></script> <style> * {margin: 0; padding: 0;} </style> </head> <body> <div id="uploader" class="wu-example"> <!--用來存放檔案資訊--> <div id="thelist" class="uploader-list"></div> <div class="btns"> <div class="picker">選擇檔案</div> <button id="ctlBtn" class="btn btn-default">開始上傳</button> </div> </div> <div class="showCtn"></div> <script> $(function() { // 登陸介面，請忽略 $.ajax({ url: '../../../../login/login', data: { un: '3e0317090ed27c1b3f5ea41709571c3dadafcce5c1f8c0ab594bee24bfe5a5e63255f9a67276ec52edebeefd274c7a282726c3570d18bc70996c267e81eba5abdc91247a02ed31288e1de41f54c81e140a2c641a7eeaecbf4e7831b8293dbe46fbbc14022c5443e03321bf8f54736d5cb0f68e1b39b6e1cac1fa98db237c4645', pwd: '41394da41aa797c871398dd23ecef0d6288b418eb5643e507316fe652701e1a14e274614dd56e31fac877fb26ba217d837860973850de1e80d0433bdbe466459bf81a2bd66212858f8e4fc33ea3cf256e1ac3e560b4709543302cf4fa8d2434f85e58b9fc9dafd1241b7d17f75014a8324f0e24536a75c28784dc90de81a4348' } }) var uploader = WebUploader.create({ // swf檔案路徑，是相對於html而言 swf: 'js/Uploader.swf', // 檔案接收介面 server: '../../../../material/jQueryFileUpload?type=1', // 選擇檔案按鈕 pick: '.picker', // runtimeOrder: 'flash',// 強制使用 flash 上傳 duplicate: true,// 同一個檔案可重複上傳 }); // 加入上傳佇列之前 uploader.on('beforeFileQueued', function(file) { if(!file.size) { console.log('檔案大小為空'); } }); // 加入上傳佇列 uploader.on('fileQueued', function(file) { var str = '<div id="'+ file.id +'"><img src=""><p>'+ file.name +'</p><p class="state">等待上傳</p><div class="progress"><span class="progress-bar">進度條</span></div></div>'; $('.showCtn').append(str); $img = $('#'+ file.id).find('img'); // 建立預覽圖 uploader.makeThumb(file, function(error, src) { if (error) { $img.replaceWith('<span>此檔案無法預覽</span>'); return; } $img.attr('src', src); }, 200, 200); }); var index = 0; // 上傳開始 uploader.on('startUpload', function( file, percentage ) { if(!index) { uploader.stop(); index++; alert('再點1次即可上傳') } }); // 點選上傳 $('#ctlBtn').on('click', function() { uploader.option('formData', {// 後續新增一些引數(這個地方最好不要新增type引數，因為預設type是表示上傳檔案的型別，如果要新增，請在url後面拼接即可) a: 1, b: 2 }); uploader.upload(); }); // 顯示進度條 uploader.on('uploadProgress', function(file, percentage) { var $li = $('#'+ file.id), $percent = $li.find('.progress-bar'); $li.find('.state').text('正在上傳'); $percent.css('width', percentage*100 +'%'); $('body').append(percentage); }); // 上傳成功 uploader.on('uploadSuccess', function(file, response) { $('#'+file.id).find('.state').text('上傳成功'); // uploader.reset();// 如果出現問題，一定要加上這一句 }); // 上傳失敗 uploader.on('uploadError', function(file, response) { $('#'+file.id).find('.state').text('上傳出錯'); }); // 上傳結束 uploader.on('uploadComplete', function(file, response) { $('#'+file.id).find('.state').text('上傳結束'); }); // 不是分片上傳時，uploadAccept相當於uploadSuccess // 獲取服務端返回的資料(每個分片會觸發一次) uploader.on('uploadAccept', function(object, data) { console && console.log(data); }); // 上傳成功回撥(所有分片上傳成功後觸發，哪個分片最慢，它就會在這裡觸發) uploader.on('uploadSuccess', function(file, data) { console && console.log(data) }) }); </script> </body> </html>
參考文章：