大文件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); 
     //這裏能夠獲得上傳後的文件路徑 
     
    
 
   
    
     
    
    
    
      }); 
     
    
 
   
    
     
    
    
     
     
    
 
   
    
     
    
    
    
      });

相關標籤/搜索

基本使用