webuploader上传文件

最新推荐文章于 2024-03-04 16:03:30 发布

努力学习的笨小孩

最新推荐文章于 2024-03-04 16:03:30 发布

阅读量1.2k

点赞数

分类专栏： php基础 js

php基础同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

具体的api文档github都有详细说明，下面直接断点续传代码 :

注意的地方：删除队列中的文件时，队列中的该文件并没有清出队列，解决办法，是在js文件中添加对应的删除方法详见。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>视频上传</title>
        <!--引入CSS-->
        <link rel="stylesheet" type="text/css" href="./css/webuploader.css">
        <!--引入JS-->
        <script type="text/javascript" src="./js/jquery.js"></script>    
        <script type="text/javascript" src="./js/webuploader.js"></script>    
    </head>
    <body>
        <!-- Main content -->
        <section class="content">
                <div class="container">
                    <div id="fileList" class="uploader-list"></div>
                </div>
                <div class="btns container">
                    <div id="videoPicker" class="webuploader-container" style="float: left; margin-right: 10px;"></div>
                    <div id="UploadBtn" class="webuploader-pick" style="float: left; margin-right: 10px;">开始上传</div>
                    <div id="StopBtn" class="webuploader-pick" style="float: left; margin-right: 10px;" status="spending">暂停上传</div>
                </div>
        </section>
    </body>
    </html>
    <script type="text/javascript">
        $(function(){
            $list = $('#fileList');
            var uploader = WebUploader.create({
                // 存在文件自动上传
                auto: false,
                // swf文件路径
                swf: './js/Uploader.swf',
                // 文件接收服务端。
                server: './upload.php',
                // 选择文件的按钮。
                pick:{ id: '#videoPicker', label : 'innerHTML' , innerHTML : '上传文件' , multiple : false },
                // 限制文件类型
                accept : { title: 'video', extensions: 'mp4,avi' , mimeTypes: 'video/*' },
                // 是否分片上传
                chunked: true,
                // 设置分片大小
                chunkSize : 5242880,
                // 最高并发线程 1 , 多了导致后台拼接顺序错乱视频文件播放失败
                threads:1,
                // 压缩文件
                resize: false,
                /** 上传方式 */
                method:'post'
            })
            // 当有文件被添加进队列的时候
            uploader.on('fileQueued', function ( file ) 
            {
                $list.append('<div id="' + file.id + '" class="item">' +
                            '<h4 class="info">' + file.name + '<button type="button" fileId="' + file.id + '" class="btn btn-danger btn-delete"><span class="glyphicon glyphicon-trash">X</span></button></h4>' +
                            '<div class="state">等待上传...</div>' +
                            '</div>');
                    /** 删除队列文件 */
                    $(document).on('click','.btn-delete',function()
                    {
                        var file_obj = uploader.getFile($(this).attr("fileId"));
                        uploader.removeFile(file_obj,true);
                        $(this).parent().parent().fadeOut();
                        $(this).parent().parent().remove();
                    })
                });
                /** 开始上传 */
                $('#UploadBtn').click(function()
                {
                    uploader.upload( $('.btn-delete').attr('fileId') )
                })
                /** 暂停上传 */
                $('#StopBtn').click(function()
                {
                    var status = $(this).attr('status');
                    if( status == 'spending' )
                    {
                        uploader.stop(true);
                        $(this).attr('status','goon');
                        $(this).text('继续上传');
                    } else if( status == 'goon' ) {
                        uploader.upload();
                        $(this).attr('status','spending');
                        $(this).text('暂停上传');
                    }
                })
                /** 上传过程中进度条 */
                uploader.on('uploadProgress', function ( file , percentage ) 
                {
                    var $li = $('#' + file.id);
                    $li.find('.state').text(Math.ceil(percentage * 100) + '%');
                });
                /** 完成上传 */
                uploader.on( 'uploadSuccess', function( file , reponse ) 
                {
                });
                  /** 上传失败 */
                uploader.on( 'uploadError', function( file ) 
                {
                    $( '#'+file.id ).find('.state').text('上传出错！');
                });
                /** 上传完成后执行 */
                uploader.on( 'uploadComplete', function( file ) 
                {
                    $( '#'+file.id ).fadeOut();
                })
                /** 文件上传前处理 */
                uploader.on( 'uploadBeforeSend' , function( chunk , data )
                {    
                });
        })
    </script>