大文件webuploader的基本使用

最新推荐文章于 2022-12-23 16:38:57 发布

转载最新推荐文章于 2022-12-23 16:38:57 发布 · 370 阅读

本文介绍如何使用 WebUploader 实现文件上传功能，包括初始化组件、设置参数、监听事件等步骤，并展示了如何实现文件预览、上传进度显示及上传完成后的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webuploader的简单使用

需要的文件自备百度很多

webuploader.js uploader.swf jQuery

<!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);//这里可以得到上传后的文件路径
        });
 
    });