webuploader上传文件

  var $list=$("#thelist");   //这几个初始化全局的百度文档上没说明,好蛋疼。
         var $btn =$("#ctlBtn");   //开始上传
         var thumbnailWidth = 100;   //缩略图高度和宽度 (单位是像素),当宽高度是0~1的时候,是按照百分比计算,具体可以看api文档
         var thumbnailHeight = 100;
      var    uploader = WebUploader.create({
              auto: true,
              // swf文件路径
              swf:'../js/Uploader.swf',

              // 文件接收服务端。
              server: _url+'MutiUpFile/uploadMuti.action',

              // 选择文件的按钮。可选。
              // 内部根据当前运行是创建,可能是input元素,也可能是flash.
              pick: '#picker',

              // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
              resize: false
          });

        // 当有文件被添加进队列的时候
          uploader.on( 'fileQueued', function( file ) {
              $list.append( '
'" class="item">' + '

' + file.name + '

'
+ '
'
); }); // 文件上传过程中创建进度条实时显示。 uploader.on( 'uploadProgress', function( file, percentage ) { var $li = $( '#'+file.id ), $percent = $li.find('.progress .progress-bar'); // 避免重复创建 if ( !$percent.length ) { $percent = $('
' + '
' + '
'
+ '
'
).appendTo( $li ).find('.progress-bar'); } $li.find('p.state').text('上传中'); $percent.css( 'width', percentage * 100 + '%' ); }); uploader.on( 'uploadSuccess', function( file ) { $( '#'+file.id ).find('p.state').text('已上传'); }); uploader.on( 'uploadError', function( file ) { $( '#'+file.id ).find('p.state').text('上传出错'); }); uploader.on( 'uploadComplete', function( file ) { $( '#'+file.id ).find('.progress').fadeOut(); });
  <div id="uploader" class="wu-example">
                    
                    <div id="thelist" class="uploader-list">div>
                    <div class="btns">
                        <div id="picker" >选择文件div>
                        <button id="ctlBtn" onclick="startUp()" class="btn btn-default">开始上传button>
                    div>
                div>

你可能感兴趣的:(webuploader上传文件)