當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

js插件---webuploader 使用（lavarel中使用）

發(fā)布時(shí)間：2025/7/14 编程问答 44 豆豆

生活随笔收集整理的這篇文章主要介紹了 js插件---webuploader 使用（lavarel中使用）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

js插件---webuploader 使用（lavarel中使用）

一、總結(jié)

一句話(huà)總結(jié)：

多去看幾個(gè)具體使用的實(shí)例，很多blog教程都有坑，多看幾個(gè)交叉印證可以沒(méi)那么多坑

1、webuploader上傳圖片時(shí)，為什么有這些on的事件，比如uploader.on( 'fileQueued', function( file ) { ？

是因?yàn)?文件上傳中，Web Uploader會(huì)對(duì)外派送這些事件，on可以監(jiān)聽(tīng)這些事件

文件上傳進(jìn)度文件上傳中，Web Uploader會(huì)對(duì)外派送uploadProgress事件，其中包含文件對(duì)象和該文件當(dāng)前上傳進(jìn)度。 // 文件上傳過(guò)程中創(chuàng)建進(jìn)度條實(shí)時(shí)顯示。 uploader.on( 'uploadProgress', function( file, percentage ) {var $li = $( '#'+file.id ),$percent = $li.find('.progress .progress-bar');// 避免重復(fù)創(chuàng)建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、注意看錯(cuò)誤提示，比如lavarel上傳圖片中出現(xiàn)419錯(cuò)誤：POST http://legend3.com/component/uploader 419 (unknown status) ？

肯定是因?yàn)橥浖觮oken驗(yàn)證造成的

3、為什么js插件的使用都非常簡(jiǎn)單（比如這里的webuploader插件）？

1、官方的文檔都相對(duì)很詳細(xì)，而且都有demo，很難錯(cuò)

2、可以百度搜那些使用示例，太多了

4、lavarel使用webuploader上傳圖片的時(shí)候，已經(jīng)添加crsf驗(yàn)證，還是出現(xiàn)419錯(cuò)誤，怎么解決Sorry, your session has expired. Please refresh and try again.？

應(yīng)該是crsf驗(yàn)證添加錯(cuò)誤，可以在配置的時(shí)候在formData里面加上token

1 var uploader = WebUploader.create({ 2 3 // swf文件路徑 4 swf: '/webuploader-0.1.5/Uploader.swf', 5 formData: { 6 // 這里的token是外部生成的長(zhǎng)期有效的，如果把token寫(xiě)死，是可以上傳的。 7 _token:'{{csrf_token()}}' 8 }, 9 10 // 文件接收服務(wù)端。 11 server: '/component/uploader', 12 // 選擇文件的按鈕。可選。 13 // 內(nèi)部根據(jù)當(dāng)前運(yùn)行是創(chuàng)建，可能是input元素，也可能是flash. 14 pick: '#picker', 15 // 不壓縮image, 默認(rèn)如果是jpeg，文件上傳前會(huì)壓縮一把再上傳！ 16 resize: false, 17 // 只允許選擇圖片文件。 18 accept: { 19 title: 'Images', 20 extensions: 'gif,jpg,jpeg,bmp,png', 21 mimeTypes: 'image/*' 22 } 23 });

第7行：token驗(yàn)證

二、lavarel使用upload上傳圖片

1、效果

2、代碼

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6  7 <script src="{{URL::asset('AdminLTE-2.4.15')}}/bower_components/jquery/dist/jquery.min.js"></script> 8  9 <link rel="stylesheet" type="text/css" href="/webuploader-0.1.5/webuploader.css"> 10  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">開(kāi)始上傳</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是外部生成的長(zhǎng)期有效的，如果把token寫(xiě)死，是可以上傳的。 33 _token:'{{csrf_token()}}' 34 }, 35 36 // 文件接收服務(wù)端。 37 server: '/component/uploader', 38 // 選擇文件的按鈕。可選。 39 // 內(nèi)部根據(jù)當(dāng)前運(yùn)行是創(chuàng)建，可能是input元素，也可能是flash. 40 pick: '#picker', 41 // 不壓縮image, 默認(rèn)如果是jpeg，文件上傳前會(huì)壓縮一把再上傳！ 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">上傳進(jìn)度...</p>' + 57 '</div>' ); 58 }); 59 60 uploader.on( 'uploadSuccess', function( file ) { 61 $( '#'+file.id ).find('p.state').text('已上傳'); 62 }); 63 // 文件上傳過(guò)程中創(chuàng)建進(jìn)度條實(shí)時(shí)顯示。 64 uploader.on( 'uploadProgress', function( file, percentage ) { 65 var $li = $( '#'+file.id ), 66 $percent = $li.find('.progress .progress-bar'); 67 68 // 避免重復(fù)創(chuàng)建 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('上傳出錯(cuò)'); 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驗(yàn)證

三、webuploader注意

1、除了引webuploader的js和css，還需要引jquery

2、accept中的文件類(lèi)型要配置正確，不然可以不知名錯(cuò)誤

accept: {title: 'Images',extensions: 'gif,jpg,jpeg,bmp,png',mimeTypes: 'image/*'}

3、js中的之所以有這些on的事件，是因?yàn)?文件上傳中，Web Uploader會(huì)對(duì)外派送這些事件，on可以監(jiān)聽(tīng)，比如uploader.on( 'fileQueued', function( file ) {

四、laravel框架使用webuploader token問(wèn)題

轉(zhuǎn)自或參考：laravel框架使用webuploader token問(wèn)題
https://blog.csdn.net/qq_30845505/article/details/79011797

在使用像webuploader 上傳組件后端需要token 驗(yàn)證的問(wèn)題如 laravel

可以在創(chuàng)建web uploade實(shí)例的時(shí)候這樣寫(xiě)：

var uploader = WebUploader.create({auto: true, // 選完文件后，是否自動(dòng)上傳 formData: {// 這里的token是外部生成的長(zhǎng)期有效的，如果把token寫(xiě)死，是可以上傳的。_token:'{{csrf_token()}}'// 我想上傳時(shí)再請(qǐng)求服務(wù)器返回token，改怎么做呢？反復(fù)嘗試而不得。謝謝大家了！//uptoken_url: '127.0.0.1:8080/examples/upload_token.php' },swf: 'js/Uploader.swf', // swf文件路徑server: '/component/uploader', // 文件接收服務(wù)端pick: '#imgPicker', // 選擇文件的按鈕。可選// 只允許選擇圖片文件。 accept: {title: 'Images',extensions: 'gif,jpg,jpeg,bmp,png',mimeTypes: 'image/*'} });

轉(zhuǎn)載于:https://www.cnblogs.com/Renyi-Fan/p/11600923.html

總結(jié)

以上是生活随笔為你收集整理的js插件---webuploader 使用（lavarel中使用）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：石川es6课程---7、数组
下一篇： js插件---WebUploader 如