master

分支 (1)

管理

管理

master

beautyPhoto
/
uploadVideo2.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!-- 使用不同智能机的宽度 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="renderer" content="webkit">
    <title>MissQ校花</title>
    <!-- 标注网页的作者 -->
    <meta name="author" content="[email protected]">
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" media="all" href="css/base.css">
    <link rel="stylesheet" href="css/styleU.css"/>
    <link rel="stylesheet" href="css/styleT.css"/>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script>
        var flog=true;

        //获取本地视频
        function change(){
            var file = document.getElementById('file_input').files[0];
            var url = URL.createObjectURL(file);
            $('.change-cov,#imgInput').css('display','block');
            $('video').attr('src',url);
            $('.add').css('display','none');
        }

        //ajax成功的回调函数
        function callback(json,n){
            var oMain=$('.main');
            for (var i = 0; i < n; i++) {
                var oDiv = $('<div></div>');
                oDiv.html('<img src="'+json.lists[i].pic+'" alt="" class="class-img"/>\
                                <div class="class-cover"></div>\
                                <span class="class-name">'+json.lists[i].name+'</span>');
                oDiv.addClass('video-box col-xs-6 col-sm-4');
                oMain.append(oDiv);
            }
//            setHeight();

            //点分类项改变获取值
            $('.video-box').on('click',function(){
                var i=$(this).index();
                $('.video-box>.class-name').each(function(){
                    var val=$('.video-box>.class-name').eq(i).html();
                    $('.videoClassify').css('display','none');
                    $('.upVideo').css('display','block');
                    $('.choose-right').html(val);
                    flog=false;
                });
            });

        }
        //创建分类列表
        function create(n) {
            $.get('json/classify.json',function(data){
                callback(data,n);
            },'json');

        };

//        //分类列表自适应屏幕
//        function setHeight(){
//            var aVideoList=$('.video-list');
//            var aImgBox=$('.imgBox');
//            aImgBox.each(function(i){
//                aImgBox[i].css('height',aVideoList[i].width());
//            });
//        }


        $(document).ready(function(){
            var oLi1=$('#content li');
            var oKong=document.getElementById('kong');
            var oContent=document.getElementById('content');
            var imgInput=document.getElementById('img_input');
            var oAdd=document.getElementById('add');
            var Hadd=oAdd.offsetWidth;
             oLi1.css('height',oLi1.width());

            //创建分类项
            $('.choose-right').on('click',function(){
                $('.videoClassify').css('display','block');
                $('.upVideo').css('display','none');
                if(flog){
                    create(8);
                }
            });


            if(typeof FileReader==='undefined'){
                console.log(imgInput)
                oKong.innerHTML = "您的页面不支持 FileReader";
                imgInput.setAttribute('disabled','disabled');
            }else{
                imgInput.addEventListener('change',readFile,false);
            }

            function setImg(){
                var aImg=oContent.getElementsByTagName('img');
                for(var i=0;i<aImg.length;i++){
                    var H=aImg[i].offsetHeight;
                    var W=aImg[i].offsetWidth;
                    if(H>W){
                        aImg[i].style.width='100%';
                    }else if(W>H){
                        aImg[i].style.height='100%';
                    }else{
                        aImg[i].style.width='100%';
                    }
                }

            }

            //获取用户上传的文件以及生成缩略图
            function readFile(){
                var oCho=document.getElementById('chooseImg')
                file = this.files;
                for(var i=0;i<file.length;i++){
                    var reader = new FileReader();
                    reader.readAsDataURL(file[i]);
                    reader.onload = function(e){
                        oKong.innerHTML='';
                        var oLi=document.createElement('li');
                        oLi.innerHTML='<div><img src="'+this.result+'" alt=""/></div>';
                        oLi.style.height=Hadd+'px';
                        oKong.insertBefore(oLi,oKong.childNodes[0]);
                        setImg();
                        oCho.style.display='none';
                    };
                }
            }


        });
    </script>
</head>
<body>
<form action="" id="form">
    <div class="container w640" id="main">
        <div class="videoClassify" style="display: none">
            <p class="class-title">选择分类</p>
            <div class="main">
                <!--<div class="video-box col-xs-6 col-sm-4">-->
                <!--<img src="img/t1.jpg" alt="" class="class-img"/>-->
                <!--<div class="class-cover"></div>-->
                <!--<span class="class-name">#唱歌</span>-->
                <!--</div>-->
            </div>
        </div>
        <div class="upVideo">
            <ul class="clearfix choose">
                <li class="fl choose-left">选择分类</li>
                <li class="fr choose-right">未选择</li>
            </ul>
            <div class="change-cov" id="change-cov" style="display: none;">
                    <video width="100%" controls autoplay id="video">
                        <source src="" type="video/webm">
                        <source src="" type="video/mp4">
                        您的浏览器不支持 HTML5 video 标签。
                    </video>
                <div class="kong"></div>
                    <div id="output">
                        <input type="hidden" value="" id="imgUrl"/>
                    </div>
            </div>
            <ul class="content" id="content">
                <li class="add" id="add"><div><input accept="video/*" type="file" id="file_input" onchange="change()"></div></li>
                <div id="kong"></div>
                <li id="imgInput" style="display: none;"><p id="chooseImg" >请选择封面图</p><input type="file" accept="image/*" id="img_input" /></li>
            </ul>
            <textarea class="video-introduce" placeholder="介绍一下你的视频吧~"></textarea>
            <p class="contant">联系方式:</p>
            <input type="text" placeholder="手机号" class="contant-i"/>
            <input type="text" placeholder="微信号" class="contant-i"/>
            <p class="message">添加您的联系方式，如我们对您的高颜值感兴趣，可方便在第一时间联系您，您则有可能成为MissQ的签约女神哦~~</p>
            <div class="sub">确定</div>
        </div>
    </div>
</form>


</body>
</html>