laiguoran
/
zhkt


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="{{rootUrl}}global/css/bootstrap.min.css">
    <link rel=stylesheet href="{{rootUrl}}global/css/Adminstyle.css">
    <!--<link rel="stylesheet" type="text/css" href="{{rootUrl}}global/css/bootstrap-theme.min.css">-->
    <link rel="stylesheet" type="text/css" href="{{rootUrl}}global/css/webuploader.css">
    <!--<link rel="stylesheet" type="text/css" href="{{rootUrl}}global/css/video.css">-->

    <!--引入JS-->
    <script src="{{rootUrl}}global/js/jquery-1.9.1.min.js"></script>
    <script src="{{rootUrl}}global/js/bootstrap.min.js"></script>
    <!--<script src="{{rootUrl}}global/js/angular.js"></script>-->
    <!--<script src="{{rootUrl}}global/js/video.js"></script>-->
    <!--<script type="text/javascript" src="{{rootUrl}}global/js/webuploader.min.js"></script>-->
    <script type="text/javascript" src="https://blueimp.github.io/JavaScript-MD5/js/md5.js"></script>
    <script src="{{rootUrl}}global/js/sha1.js"></script>
    <script type="text/javascript" src="{{rootUrl}}global/js/videoupload.js"></script>
    <!--<script src="{{rootUrl}}global/js/lib.js"></script>-->
    <style>
        .wu-example {
            position: relative;
            padding: 45px 15px 15px;
            margin: 15px 0;
            background-color: #fafafa;
            box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
            border-color: #e5e5e5 #eee #eee;
            border-style: solid;
            border-width: 1px 0;
        }
        .uploader-list {
            width: 100%;
            overflow: hidden;
        }
        #picker {
            display: inline-block;
            line-height: 1.428571429;
            vertical-align: middle;
            margin: 0 12px 0 0;
        }
        #picker .webuploader-pick {
            padding: 6px 12px;
            display: block;
        }
    </style>
</head>
<body>
<!--<form action="/uploadvideo" method="post" name="uploadfile" enctype="multipart/form-data">-->
    <!--<input type="file" name="upload" id="upload">-->
    <!--<input type="submit" name="submit" id="submit" value="上传视频">-->
<!--</form>-->

<!--<div class="f-clearfix ng-scope">-->
    <!--<span class="m-upload">-->
        <!--<a class="u-btn u-btn-custom" href="javascript:;">添加视频</a>-->
        <!--<input class="u-upload u-upload-custom" type="file" id="fileinput">-->
    <!--</span>-->
    <!--<a class="u-btn u-btn-custom f-ml-10 disabled s-disabled" id="submitBtn" ng-class="!checkedPending() &amp;&amp; 'disabled s-disabled'" href="javascript:;" style="">上传视频</a>-->
<!--</div>-->

<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <span class="mUpload">
            <a class="btn btn-primary" href="javascript:;">
                <input type="file" name="file" class="uploadVideo" id="inputid"/>选择文件
            </a>
        </span>
        <button id="uploadid" class="btn btn-default">上传视频</button>
    </div>
</div>

<script>
    $(function(){
        var opt = {
            fileInputId: 'inputid',
            fileUploadId: 'uploadid'
        };
        Uploader(opt).init();
    })
</script>
<script>
    jQuery(function() {
        $list = $('#thelist'),
                $btn = $('#ctlBtn'),
                state = 'pending',
                uploader;
        uploader = WebUploader.create({
            // 不压缩image
            resize: false,
            // swf文件路径
            swf: '{{rootUrl}}global/js/uploader.swf',
            // 文件接收服务端。
            server: '/upload2',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',
            chunked: true,
            threads: 1,
            formData:{
                token:'',
                bucket:'',
                object:'',
                context:''
            },
            chunkSize: 3 * 1024 * 1024,
//            auto: true,
            accept: {
                title: 'video',
                extensions: 'MOV,MP4,M4V,F4V,3GP,MKV,WEBM,VOB,DVD,MPG,MPEG,DAT,TS,MTS,M2TS,RMVB,RM,FLV,AVI,ASF,WMV,SWF',
                mimeTypes: 'video/*'
            }
        });

        uploader.on( 'fileQueued', function( file ) {
            var fileKey = md5(file.name+ ":" +file.size);
            if(localStorage.getItem(fileKey + '_created') != null){
                percentage = localStorage.getItem(fileKey + '_percentage');
                $list.append( '<div id="' + file.id + '" class="item" >' +
                        '<h4 class="info">' + file.name + '</h4>' +
                        '<p class="state">'+ (percentage * 100).toFixed(2) + '%</p>' +
                        '</div>' );
                var $li = $( '#'+file.id ),
                        $percent = $li.find('.progress .progress-bar');

                // 避免重复创建
                if ( !$percent.length ) {
                    $percent = $('<div class="progress progress-striped active">' +
                            '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                            '</div>' +
                            '</div>').appendTo( $li ).find('.progress-bar');
                }
                $li.find('p.state').text((percentage * 100).toFixed(2) + '%');

                $percent.css( 'width', percentage * 100 + '%' );
            }else{
                localStorage.setItem(fileKey + "_created", +new Date);
                $list.append( '<div id="' + file.id + '" class="item">' +
                        '<h4 class="info">' + file.name + '</h4>' +
                        '<p class="state">等待上传...'+ WebUploader.formatSize(file.size) +'</p>' +
                        '</div>' );
            }

        });

        uploader.on( 'uploadAccept', function( file, response ) {
            var fileKey = md5(file.file.name+ ":" +file.file.size);
            if(response.data.videoinitlist != null){
                var token = response.data.videoinitlist.token;
                var bucket = response.data.videoinitlist.bucket;
                var object = response.data.videoinitlist.object;
                localStorage.setItem(fileKey + '_bucket', bucket);
                localStorage.setItem(fileKey + '_token', token);
                localStorage.setItem(fileKey + '_object', object);
            }
            var context = response.data.context;
            localStorage.setItem(fileKey + '_context', context);
            uploader.option('formData', {
                token:token,
                bucket:bucket,
                object:object,
                context:context
            });
        });

        uploader.on( 'uploadProgress', function( file, percentage ) {
            var fileKey = md5(file.name+ ":" +file.size);
            var $li = $( '#'+file.id ),
                    $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                        '</div>' +
                        '</div>').appendTo( $li ).find('.progress-bar');
            }
            localStorage.setItem(fileKey + '_percentage', percentage);
            $li.find('p.state').text((percentage * 100).toFixed(2) + '%');

            $percent.css( 'width', percentage * 100 + '%' );
        });

        uploader.on( 'uploadSuccess', function( file ) {
            var fileKey = md5(file.name+ ":" +file.size);
            $( '#'+file.id ).find('p.state').html('<span style="color: #5cb85c">上传成功</span>');
            localStorage.removeItem(fileKey + '_created');
            localStorage.removeItem(fileKey + '_bucket');
            localStorage.removeItem(fileKey + '_token');
            localStorage.removeItem(fileKey + '_object');
            localStorage.removeItem(fileKey + '_context');
            localStorage.removeItem(fileKey + '_percentage');
            $btn.text('上传视频');
            uploader.option('formData', {
                token:'',
                bucket:'',
                object:'',
                context:''
            });
            uploader.upload();
        });

        uploader.on( 'uploadError', function( file ) {
            $( '#'+file.id ).find('p.state').html('<span style="color: #a94442">上传出错</span>');
        });

        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').fadeOut();
        });

        $btn.on( 'click', function( ) {
            if ( state === 'uploading' ) {
                uploader.stop(true);
                $btn.text('继续上传');
                state = 'pending';
            } else {
                uploader.upload();
                $btn.text('暂停上传');
                state = 'uploading';
            }
        });
    })
</script>
</body>
</html>