微信扫一扫打赏支持

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/*'
    }
});

 


 

 

 

 

posted @ 2019-09-27 22:59  范仁义  阅读(3473)  评论(0)  编辑  收藏  举报