zoukankan      html  css  js  c++  java

  • 大文件webuploader的基本使用

    webuploader的简单使用

    需要的文件   自备  百度很多

    webuploader.js  uploader.swf  jQuery

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Document</title>
    6.     <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    7.     <script type="text/javascript" src="webuploader.js"></script>
    8.     <style type="text/css">
    9.       .webuploader-container {
    10.             position: relative;
    11.         }
    12.         .webuploader-element-invisible {
    13.             position: absolute !important;
    14.             clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    15.             clip: rect(1px,1px,1px,1px);
    16.         }
    17.         .webuploader-pick {
    18.             position: relative;
    19.             display: inline-block;
    20.             cursor: pointer;
    21.             background: #00b7ee;
    22.             padding: 10px 15px;
    23.             color: #fff;
    24.             text-align: center;
    25.             border-radius: 3px;
    26.             overflow: hidden;
    27.         }
    28.         .webuploader-pick-hover {
    29.             background: #00a2d4;
    30.         }
    31.  
    32.         .webuploader-pick-disable {
    33.             opacity: 0.6;
    34.             pointer-events:none;
    35.         }
    36.     </style>
    37. </head>
    38. <body>
    39.     <div id="uploader" class="wu-example">
    40.          <!--用来存放文件信息-->
    41.          <div id="thelist" class="uploader-list"></div>
    42.          <div class="btns">
    43.             <div id="picker">选择文件</div>
    44.             <button id="ctlBtn" class="btn btn-default">开始上传</button>
    45.          </div>
    46.      </div>
    47.      <div id="fileList"></div>
    48.      <div id="ss"></div>
    49. </body>
    50. </html>
    1.     $(function() {
    2.         var  uploader;
    3.         uploader = WebUploader.create({
    4.                resize: false, // 不压缩image     
    5.                swf: 'uploader.swf',// swf文件路径    
    6.                server: 'upload.php', // 文件接收服务端。 
    7.                pick: '#picker',// 选择文件的按钮。可选。内部根据当前运行是创建，可能是input元素，也可能是flash.
    8.                chunked: true,//允许分片上传
    9.                chunkSize:2*1024*1024,//每个分片大小
    10.                auto: true,//是否自动上传
    11.                duplicate:true,//去除重复
    12.                fileNumLimit:20,//上传文件个数限制  
    13.                fileSingleSizeLimit:20*1024*1024, //单个文件大小限制  20M
    14.                accept: {
    15.                 title: '文字描述',//文字描述
    16.                 extensions: 'png,3gp,mp4,rmvb,mov,avi,m4v,wmv',//上传文件后缀
    17.                 mimeTypes: 'image/*,video/*,audio/*,application/*'//上传文件类型
    18.                }
    19.         });
    20.         uploader.on('uploadStart', function (file) {
    21.               alert("这是文件上传前的操作函数");
    22.         });
    23.         $("#ctlBtn").click(function () {
    24.             alert("要使用手动上传请设置参数");
    25.           //  uploader.upload();//这是将参数配置auto设置 false 手动上传
    26.         });
    27.         uploader.on( 'fileQueued', function( file ) { //文件加入队列后触发
    28.              var $list = $("#fileList"),
    29.              $li = $(
    30.              '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>'+ '<div class="info">' + file.name + '</div>' + '</div>'
    31.              ),
    32.              $img = $li.find('img');         
    33.              // $list为容器jQuery实例
    34.              $list.append( $li );  
    35.              // 创建缩略图
    36.              uploader.makeThumb( file, function( error, src ) { //src base_64位
    37.                  if ( error ) {
    38.                      $img.replaceWith('<span>不能预览</span>');
    39.                      return;
    40.                  }
    41.                
    42.                  $img.attr( 'src', src );
    43.              }, 100, 100 ); //100x100为缩略图尺寸
    44.         });
    45.         // 文件上传过程中创建进度实时显示。
    46.         uploader.on( 'uploadProgress', function( file, percentage ) {
    47.             var ss=(percentage*100)+"%";
    48.             $("#ss").text(ss);
    49.         });
    50.            
    51.         // 文件上传成功
    52.         uploader.on( 'uploadSuccess', function( file, res ) {
    53.              alert("这是文件上传成功的操作函数");
    54.              console.log(res.filePaht);//这里可以得到上传后的文件路径
    55.         });
    56.  
    57.     });
  • 相关阅读:
    JAVA并发-CountDownLatch
    【转载】Makedown数学公式语法
    算法的时间复杂度
    JVM-卡表（Card Table）
    sync.WaitGroup的使用以及坑
    go 多协程爬取图片
    go ioutial 读取写入文件
    go 下载图片
    go 正则 爬取邮箱代码
    go 解析path
  • 原文地址：https://www.cnblogs.com/xproer/p/10509693.html
Copyright © 2011-2022 走看看