大文件webuploader的基本使用

时间 2019-11-29

标签文件 webuploader 基本使用繁體版

原文原文链接

webuploader的简单使用javascript

须要的文件自备百度不少php

webuploader.js uploader.swf jQuerycss

  
 
   
    
     
    
    
     
     <!DOCTYPE html> 
     
    
 
   
    
     
    
    
     
     <html lang="en"> 
     
    
 
   
    
     
    
    
     
     <head> 
     
    
 
   
    
     
    
    
     
     <meta charset="UTF-8"> 
     
    
 
   
    
     
    
    
     
     <title>Document 
     </title> 
     
    
 
   
    
     
    
    
     
     <script type="text/javascript" src="jquery-1.10.2.min.js"> 
     </script> 
     
    
 
   
    
     
    
    
     
     <script type="text/javascript" src="webuploader.js"> 
     </script> 
     
    
 
   
    
     
    
    
     
     <style type="text/css"> 
     
    
 
   
    
     
    
    
     
     .webuploader-container { 
     
    
 
   
    
     
    
    
     
     position: relative; 
     
    
 
   
    
     
    
    
    
      } 
     
    
 
   
    
     
    
    
     
     .webuploader-element-invisible { 
     
    
 
   
    
     
    
    
     
     position: absolute 
     !important; 
     
    
 
   
    
     
    
    
     
     clip: 
     rect(1px 1px 1px 1px); 
     /* IE6, IE7 */ 
     
    
 
   
    
     
    
    
     
     clip: 
     rect(1px,1px,1px,1px); 
     
    
 
   
    
     
    
    
    
      } 
     
    
 
   
    
     
    
    
     
     .webuploader-pick { 
     
    
 
   
    
     
    
    
     
     position: relative; 
     
    
 
   
    
     
    
    
     
     display: inline-block; 
     
    
 
   
    
     
    
    
     
     cursor: pointer; 
     
    
 
   
    
     
    
    
     
     background: 
     #00b7ee; 
     
    
 
   
    
     
    
    
     
     padding: 
     10px 
     15px; 
     
    
 
   
    
     
    
    
     
     color: 
     #fff; 
     
    
 
   
    
     
    
    
     
     text-align: center; 
     
    
 
   
    
     
    
    
     
     border-radius: 
     3px; 
     
    
 
   
    
     
    
    
     
     overflow: hidden; 
     
    
 
   
    
     
    
    
    
      } 
     
    
 
   
    
     
    
    
     
     .webuploader-pick-hover { 
     
    
 
   
    
     
    
    
     
     background: 
     #00a2d4; 
     
    
 
   
    
     
    
    
    
      } 
     
    
 
   
    
     
    
    
     
     
    
 
   
    
     
    
    
     
     .webuploader-pick-disable { 
     
    
 
   
    
     
    
    
     
     opacity: 
     0.6; 
     
    
 
   
    
     
    
    
     
     pointer-events:none; 
     
    
 
   
    
     
    
    
    
      } 
     
    
 
   
    
     
    
    
     
     </style> 
     
    
 
   
    
     
    
    
     
     </head> 
     
    
 
   
    
     
    
    
     
     <body> 
     
    
 
   
    
     
    
    
     
     <div id="uploader" class="wu-example"> 
     
    
 
   
    
     
    
    
     
     <!--用来存放文件信息--> 
     
    
 
   
    
     
    
    
     
     <div id="thelist" class="uploader-list"> 
     </div> 
     
    
 
   
    
     
    
    
     
     <div class="btns"> 
     
    
 
   
    
     
    
    
     
     <div id="picker">选择文件 
     </div> 
     
    
 
   
    
     
    
    
     
     <button id="ctlBtn" class="btn btn-default">开始上传 
     </button> 
     
    
 
   
    
     
    
    
     
     </div> 
     
    
 
   
    
     
    
    
     
     </div> 
     
    
 
   
    
     
    
    
     
     <div id="fileList"> 
     </div> 
     
    
 
   
    
     
    
    
     
     <div id="ss"> 
     </div> 
     
    
 
   
    
     
    
    
     
     </body> 
     
    
 
   
    
     
    
    
     
     </html>

  
 
   
    
     
    
    
    
      $( 
     function() { 
     
    
 
   
    
     
    
    
     
     var uploader; 
     
    
 
   
    
     
    
    
    
      uploader = WebUploader.create({ 
     
    
 
   
    
     
    
    
     
     resize: 
     false, 
     // 不压缩image  
     
    
 
   
    
     
    
    
    
      swf: 
     'uploader.swf', 
     // swf文件路径  
     
    
 
   
    
     
    
    
    
      server: 
     'upload.php', 
     // 文件接收服务端。  
     
    
 
   
    
     
    
    
    
      pick: 
     '#picker', 
     // 选择文件的按钮。可选。内部根据当前运行是建立，多是input元素，也多是flash. 
     
    
 
   
    
     
    
    
    
      chunked: 
     true, 
     //容许分片上传 
     
    
 
   
    
     
    
    
    
      chunkSize: 
     2* 
     1024* 
     1024, 
     //每一个分片大小 
     
    
 
   
    
     
    
    
    
      auto: 
     true, 
     //是否自动上传 
     
    
 
   
    
     
    
    
    
      duplicate: 
     true, 
     //去除重复 
     
    
 
   
    
     
    
    
    
      fileNumLimit: 
     20, 
     //上传文件个数限制  
     
    
 
   
    
     
    
    
    
      fileSingleSizeLimit: 
     20* 
     1024* 
     1024, 
     //单个文件大小限制 20M 
     
    
 
   
    
     
    
    
    
      accept: { 
     
    
 
   
    
     
    
    
     
     title: 
     '文字描述', 
     //文字描述 
     
    
 
   
    
     
    
    
    
      extensions: 
     'png,3gp,mp4,rmvb,mov,avi,m4v,wmv', 
     //上传文件后缀 
     
    
 
   
    
     
    
    
    
      mimeTypes: 
     'image/*,video/*,audio/*,application/*' 
     //上传文件类型 
     
    
 
   
    
     
    
    
    
      } 
     
    
 
   
    
     
    
    
    
      }); 
     
    
 
   
    
     
    
    
    
      uploader.on( 
     'uploadStart', 
     function (file) { 
     
    
 
   
    
     
    
    
    
      alert( 
     "这是文件上传前的操做函数"); 
     
    
 
   
    
     
    
    
    
      }); 
     
    
 
   
    
     
    
    
    
      $( 
     "#ctlBtn").click( 
     function () { 
     
    
 
   
    
     
    
    
    
      alert( 
     "要使用手动上传请设置参数"); 
     
    
 
   
    
     
    
    
     
     // uploader.upload();//这是将参数配置auto设置 false 手动上传 
     
    
 
   
    
     
    
    
    
      }); 
     
    
 
   
    
     
    
    
    
      uploader.on( 
     'fileQueued', 
     function( file ) { 
     //文件加入队列后触发 
     
    
 
   
    
     
    
    
     
     var $list = $( 
     "#fileList"), 
     
    
 
   
    
     
    
    
    
      $li = $( 
     
    
 
   
    
     
    
    
     
     '<div id="' + file.id + 
     '" class="file-item thumbnail">' + 
     '<img>'+ 
     '<div class="info">' + file.name + 
     '</div>' + 
     '</div>' 
     
    
 
   
    
     
    
    
    
      ), 
     
    
 
   
    
     
    
    
    
      $img = $li.find( 
     'img'); 
     
    
 
   
    
     
    
    
     
     // $list为容器jQuery实例 
     
    
 
   
    
     
    
    
    
      $list.append( $li ); 
     
    
 
   
    
     
    
    
     
     // 建立缩略图 
     
    
 
   
    
     
    
    
    
      uploader.makeThumb( file, 
     function( error, src ) { 
     //src base_64位 
     
    
 
   
    
     
    
    
     
     if ( error ) { 
     
    
 
   
    
     
    
    
    
      $img.replaceWith( 
     '<span>不能预览</span>'); 
     
    
 
   
    
     
    
    
     
     return; 
     
    
 
   
    
     
    
    
    
      } 
     
    
 
   
    
     
    
    
     
     
    
 
   
    
     
    
    
    
      $img.attr( 
     'src', src ); 
     
    
 
   
    
     
    
    
    
      }, 
     100, 
     100 ); 
     //100x100为缩略图尺寸 
     
    
 
   
    
     
    
    
    
      }); 
     
    
 
   
    
     
    
    
     
     // 文件上传过程当中建立进度实时显示。 
     
    
 
   
    
     
    
    
    
      uploader.on( 
     'uploadProgress', 
     function( file, percentage ) { 
     
    
 
   
    
     
    
    
     
     var ss=(percentage* 
     100)+ 
     "%"; 
     
    
 
   
    
     
    
    
    
      $( 
     "#ss").text(ss); 
     
    
 
   
    
     
    
    
    
      }); 
     
    
 
   
    
     
    
    
     
     
    
 
   
    
     
    
    
     
     // 文件上传成功 
     
    
 
   
    
     
    
    
    
      uploader.on( 
     'uploadSuccess', 
     function( file, res ) { 
     
    
 
   
    
     
    
    
    
      alert( 
     "这是文件上传成功的操做函数"); 
     
    
 
   
    
     
    
    
     
     console.log(res.filePaht); 
     //这里能够获得上传后的文件路径 
     
    
 
   
    
     
    
    
    
      }); 
     
    
 
   
    
     
    
    
     
     
    
 
   
    
     
    
    
    
      });