js插件---webuploader 使用（lavarel中使用）
生活随笔
收集整理的這篇文章主要介紹了
js插件---webuploader 使用（lavarel中使用）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
js插件---webuploader 使用（lavarel中使用）
一、總結
一句話總結：
多去看幾個具體使用的實例，很多blog教程都有坑，多看幾個交叉印證可以沒那么多坑
?
1、webuploader上傳圖片時，為什么有這些on的事件，比如uploader.on( 'fileQueued', function( file ) { ？
是因為 文件上傳中，Web Uploader會對外派送這些事件，on可以監聽這些事件
文件上傳進度 文件上傳中，Web Uploader會對外派送uploadProgress事件，其中包含文件對象和該文件當前上傳進度。 // 文件上傳過程中創建進度條實時顯示。 uploader.on( 'uploadProgress', function( file, percentage ) {var $li = $( '#'+file.id ),$percent = $li.find('.progress .progress-bar');// 避免重復創建if ( !$percent.length ) {$percent = $('<div class="progress progress-striped active">' +'<div class="progress-bar" role="progressbar" style="width: 0%">' +'</div>' +'</div>').appendTo( $li ).find('.progress-bar');}$li.find('p.state').text('上傳中');$percent.css( 'width', percentage * 100 + '%' ); });?
?
2、注意看錯誤提示，比如lavarel上傳圖片中出現419錯誤：POST http://legend3.com/component/uploader 419 (unknown status) ？
肯定是因為忘記加token驗證造成的
?
3、為什么js插件的使用都非常簡單（比如這里的webuploader插件）？
1、官方的文檔都相對很詳細，而且都有demo，很難錯
2、可以百度搜那些使用示例，太多了
?
4、lavarel使用webuploader上傳圖片的時候，已經添加crsf驗證，還是出現419錯誤，怎么解決Sorry, your session has expired. Please refresh and try again.？
應該是crsf驗證添加錯誤，可以在配置的時候在formData里面加上token
1 var uploader = WebUploader.create({ 2 3 // swf文件路徑 4 swf: '/webuploader-0.1.5/Uploader.swf', 5 formData: { 6 // 這里的token是外部生成的長期有效的，如果把token寫死，是可以上傳的。 7 _token:'{{csrf_token()}}' 8 }, 9 10 // 文件接收服務端。 11 server: '/component/uploader', 12 // 選擇文件的按鈕。可選。 13 // 內部根據當前運行是創建，可能是input元素，也可能是flash. 14 pick: '#picker', 15 // 不壓縮image, 默認如果是jpeg，文件上傳前會壓縮一把再上傳！ 16 resize: false, 17 // 只允許選擇圖片文件。 18 accept: { 19 title: 'Images', 20 extensions: 'gif,jpg,jpeg,bmp,png', 21 mimeTypes: 'image/*' 22 } 23 });第7行：token驗證
?
?
二、lavarel使用upload上傳圖片
1、效果
?
2、代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!-- jQuery 3 --> 7 <script src="{{URL::asset('AdminLTE-2.4.15')}}/bower_components/jquery/dist/jquery.min.js"></script> 8 <!--引入CSS--> 9 <link rel="stylesheet" type="text/css" href="/webuploader-0.1.5/webuploader.css"> 10 <!--引入JS--> 11 <script type="text/javascript" src="/webuploader-0.1.5/webuploader.js"></script> 12 </head> 13 <body> 14 15 <div id="uploader" class="wu-example"> 16 <!--用來存放文件信息--> 17 <div id="thelist" class="uploader-list"></div> 18 <div class="btns"> 19 <div id="picker">選擇文件</div> 20 <button id="ctlBtn" class="btn btn-default">開始上傳</button> 21 <button id="goBack" class="btn btn-default">返回</button> 22 </div> 23 </div> 24 25 26 <script> 27 var uploader = WebUploader.create({ 28 29 // swf文件路徑 30 swf: '/webuploader-0.1.5/Uploader.swf', 31 formData: { 32 // 這里的token是外部生成的長期有效的，如果把token寫死，是可以上傳的。 33 _token:'{{csrf_token()}}' 34 }, 35 36 // 文件接收服務端。 37 server: '/component/uploader', 38 // 選擇文件的按鈕。可選。 39 // 內部根據當前運行是創建，可能是input元素，也可能是flash. 40 pick: '#picker', 41 // 不壓縮image, 默認如果是jpeg，文件上傳前會壓縮一把再上傳！ 42 resize: false, 43 // 只允許選擇圖片文件。 44 accept: { 45 title: 'Images', 46 extensions: 'gif,jpg,jpeg,bmp,png', 47 mimeTypes: 'image/*' 48 } 49 }); 50 var $list = $("#thelist"); 51 uploader.on( 'fileQueued', function( file ) { 52 console.log('fileQueued'); 53 $list.append( '<div id="' + file.id + '" class="item">' + 54 '<h4 class="info">' + file.name + '</h4>' + 55 '<p class="state">等待上傳...</p>' + 56 '<p class="progress progress-bar">上傳進度...</p>' + 57 '</div>' ); 58 }); 59 60 uploader.on( 'uploadSuccess', function( file ) { 61 $( '#'+file.id ).find('p.state').text('已上傳'); 62 }); 63 // 文件上傳過程中創建進度條實時顯示。 64 uploader.on( 'uploadProgress', function( file, percentage ) { 65 var $li = $( '#'+file.id ), 66 $percent = $li.find('.progress .progress-bar'); 67 68 // 避免重復創建 69 if ( !$percent.length ) { 70 $percent = $('<div class="progress progress-striped active">' + 71 '<div class="progress-bar" role="progressbar" style="width: 0%">' + 72 '</div>' + 73 '</div>').appendTo( $li ).find('.progress-bar'); 74 } 75 76 $li.find('p.state').text('上傳中'); 77 78 console.log(percentage * 100); 79 $percent.css( 'width', percentage * 100 + '%' ); 80 }); 81 uploader.on( 'uploadError', function( file ) { 82 $( '#'+file.id ).find('p.state').text('上傳出錯'); 83 }); 84 85 uploader.on( 'uploadComplete', function( file ) { 86 $( '#'+file.id ).find('.progress').fadeOut(); 87 }); 88 89 $("#ctlBtn").on('click', function() { 90 console.log('1111111111'); 91 uploader.upload(); 92 }); 93 $("#goBack").on('click', function() { 94 $("#uploadFileDiv").empty(); 95 $("#uploadFile").removeClass("hidden"); 96 }); 97 </script> 98 99 </body> 100 </html>第33行，lavarel里面的token驗證
?
?
三、webuploader注意
1、除了引webuploader的js和css，還需要引jquery
2、accept中的文件類型要配置正確，不然可以不知名錯誤
accept: {title: 'Images',extensions: 'gif,jpg,jpeg,bmp,png',mimeTypes: 'image/*'}3、js中的之所以有這些on的事件，是因為 文件上傳中，Web Uploader會對外派送這些事件，on可以監聽，比如uploader.on( 'fileQueued', function( file ) {
?
?
?
?
四、laravel框架使用webuploader token問題
轉自或參考：laravel框架使用webuploader token問題
https://blog.csdn.net/qq_30845505/article/details/79011797
在使用像webuploader 上傳組件 后端需要token 驗證的問題 如 laravel
?
可以在創建web uploade實例的時候這樣寫：
?
var uploader = WebUploader.create({auto: true, // 選完文件后，是否自動上傳 formData: {// 這里的token是外部生成的長期有效的，如果把token寫死，是可以上傳的。_token:'{{csrf_token()}}'// 我想上傳時再請求服務器返回token，改怎么做呢？反復嘗試而不得。謝謝大家了！//uptoken_url: '127.0.0.1:8080/examples/upload_token.php' },swf: 'js/Uploader.swf', // swf文件路徑server: '/component/uploader', // 文件接收服務端pick: '#imgPicker', // 選擇文件的按鈕。可選// 只允許選擇圖片文件。 accept: {title: 'Images',extensions: 'gif,jpg,jpeg,bmp,png',mimeTypes: 'image/*'} });?
?
?
?
?
轉載于:https://www.cnblogs.com/Renyi-Fan/p/11600923.html
總結
以上是生活随笔為你收集整理的js插件---webuploader 使用（lavarel中使用）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 石川es6课程---7、数组
- 下一篇： js插件---WebUploader 如