master

分支 (1)

管理

管理

master

beautyPhoto
/
myApplication.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>
    <!-- 标注网页的作者 -->
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" media="all" href="css/base.css">
    <link rel="stylesheet" href="css/styleU.css"/>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/check.js"></script>
    <style>

    </style>
    <script>
        ;(function(win, doc){
            function change(){
                doc.documentElement.style.fontSize=20*doc.documentElement.clientWidth/320+'px';
            }

            if(doc.documentElement.clientWidth>640){
                doc.documentElement.style.fontSize=20*640/320+'px';
            }else{
                change();
            }
            win.addEventListener('resize', change, false);
        })(window, document);

        $(document).ready(function(){
            var oLi1=$('.adds');
            oLi1.css('height',oLi1.width());
            checkForm('form');
            var oCon= document.getElementById("content");

            var oLi1=oCon.getElementsByTagName('li')[1];
            var H=oLi1.offsetWidth+'px';
            var file;
            getFile();
            function setHeight(){
                var aLi=oCon.getElementsByTagName('li');
                for(var i=0;i<aLi.length;i++){
                    aLi[i].style.height=H;
                    aLi[i].style.width=H;
                }
            }


            //绑定上传获取文件事件
            function getFile(){
                var input = document.getElementsByClassName("file_inputs")[0];
                if(typeof FileReader==='undefined'){
                    oCon.innerHTML = "您的页面不支持 FileReader";
                    input.setAttribute('disabled','disabled');
                }else{
                    input.addEventListener('change',readFile,false);
                }

                //获取用户上传的文件以及生成缩略图
                function readFile(){
                    file = this.files;
                    for(var i=0;i<file.length;i++){
                        var reader = new FileReader();
                        reader.readAsDataURL(file[i]);
                        reader.onload = function(e){
                            var oLi=document.querySelector('.uploadBox');
                            var oImg=document.querySelector('#uploadImg');
                            var oAdds=document.querySelector('.adds');
                            oLi.style.display='block';
                            oImg.src=this.result;
                            oLi.className='uploadBox imglist';
                            oAdds.style.display='none';
                            setHeight();
                            setImg();
                        };
                    }
                }

            }

            //动态设置图片的显示方式
            function setImg(){
                var aImg=oCon.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 creatSchool(val){
                $.ajax({
                    url: 'http://app.missquq.com/api/school/listSchool',
                    data: {
                        name: val
                    },
                    jsonp: 'callback',    // cbName
                    dataType: 'jsonp', // 使用jsonp
                    success: function(json) {
                        var arr1=[];
                        $.each(json,function(i){
                            arr1.push(json[i].name);
                        });
                        $('#ul1').html('');
                        $.each(arr1,function(i){
                            var oLi = $('<li></li>');
                            oLi.html(arr1[i]);
                            $('#ul1').append(oLi);
                        });

                        var sch;
                        $('#ul1 li').on('click',function(){
                            sch=$(this).html();
                            $('#main').css('display','block');
                            $('.schoolname').val(sch);
                            $('.search').css('display','none');
                        });

                        var lastLi=$('<div>没有找到你的学校？<p>创建你的学校</p></div>');
                        lastLi.addClass('addschool-name');
                        $('#ul1').append(lastLi);
                        $('.addschool-name').on('click',function(){
                            $('.search').css('display','none');
                            $('.addschool').css('display','block');
                        });

                        $('#ul1 li').on('click',function(){
                            var val=$(this).html();
                            $('#t1').val(val);
                        });
                        if($('#ul1').height()>1600){
                            $('.school-cover').css('height',$('#ul1').height());
                        }else{
                            $('.school-cover').css('height','40rem');
                        }
                    }
                });
            }

//            $('#t1').keyup(function(){
//                var val=this.value;
//                creatSchool(val);
//            });
            $('.search-icon').on('click',function(){
                var val=$('#t1').val();
                creatSchool(val);
            });

            $('.schoolname').on('click',function(){
                $('.addschool').css('display','none');
                $('#ul1').html('');
                $('#t1').val('');
                $('.search').css('display','block');
                var val=this.value;
                creatSchool(val);
            });

            $('.delete').on('click',function(){
                $('.uploadBox').css('display','none');
                $('.adds').css('display','block');
            });

            $('.bt2').on('click',function(){
                var t2val=$('#t2').val();
                $.ajax({
                    url: 'http://app.missquq.com/api/school/saveSchool',
                    data: {
                        name: t2val
                    },
                    jsonp: 'callback',    // cbName
                    dataType: 'jsonp', // 使用jsonp
                    success:function(json){
                        if(json.state=='success'){
                        alert('创建学校成功');
                            $('.schoolname').val(t2val);
                            $('#main').css('display','block');
                            $('.addschool').css('display','none');
                        }
                    }
                });
            });

            $('#submit').on('click',function(){
                if($('.schoolname').val()==''){
                    alert('请选择学校');
                    return false;
                }

                if($('#file_inputs').val()==''){
                    alert('请选择照片');
                    return false;
                }
            });
            $('.school-cover').on('click',function(){
                $('.search').css('display','none');
                $('.addschool').css('display','none');
            });


//            $("body").attr("onbeforeunload",function(){
////                confirm("离开页面数据将不保存，确定离开吗?");
//                return '您输入的内容尚未保存，确定离开此页面吗？';
//            });

//            $(window).bind('beforeunload',function(){
//                return '您输入的内容尚未保存，确定离开此页面吗？';
//            });

        });
    </script>
</head>
<body>
    <div class="container w640" id="main">
        <p class="basic-title">基本信息</p>
        <form action="http://app.missquq.com/trinee/addAlbum" id="form"  method ="post"  enctype="multipart/form-data">
            <ul class="infor-list">
                <li>
                    <span class="red_icon"><i class="space">姓</i><i>名</i></span>
                    <input type="text" name="name" data-err="* 请输入2-4位汉字" placeholder="请输入真实姓名"/>
                    <b></b>
                </li>
                <li>
                    <span class="relation red_icon">联系方式</span>
                    <input type="text" name="tel" data-err="* 请输入正确的手机号" placeholder="请填写手机号码"/>
                    <b></b>
                </li>
                <li>
                    <span class=" red_icon"><i class="space">学</i><i>校</i></span>
                    <input class="schoolname" type="text" name="school" data-err="* 请输入汉字" placeholder="请选择" readonly="readonly"/>
                    <b></b>
                </li>
                <li>
                    <span><i class="space">专</i><i>业</i></span>
                    <input type="text" name="major" data-err="* 请输入汉字" placeholder="请输入专业名称"/>
                    <b></b>
                </li>
                <li>
                    <span><i class="space">年</i><i>级</i></span>
                    <input type="text" name="grade" data-err="* 请输入汉字" placeholder="请输入年级，例如：16级"/>
                    <b></b>
                </li>
                <li>
                    <span class="red_icon">满意照片</span><p class="photo-hint">上传最美照片</p>
                </li>
                <div class="content contents" id="content">
                    <li class="uploadBox" style="display: none;">
                        <div>
                            <i alt="" class="delete"></i>
                            <img id="uploadImg" src="" alt=""/>
                        </div>
                    </li>
                    <li class="adds">
                        <div>
                            <input accept="image/*" name="files" type="file" id="file_inputs" class="file_inputs">
                        </div>
                    </li>
                </div>
            </ul>
            <div class="wrong-photo">
                <p>你辣么美，我要看正脸！</p>
                <div>
                    <img src="img/photo1.jpg" alt=""/>
                    <img src="img/photo2.jpg" alt=""/>
                    <img src="img/photo3.jpg" alt="" class="last"/>
                </div>
            </div>
            <div class="right-photo">
                <p>360度无死角美女</p>
                <div>
                    <img src="img/photo4.jpg" alt=""/>
                    <img src="img/photo5.jpg" alt=""/>
                    <img src="img/photo6.jpg" alt="" class="last"/>
                </div>
            </div>
            <p class="subbox"><input type="submit" value="提交" id="submit"/></p>
        </form>

    </div>
    <div class="search w640">
        <div class="school-cover"></div>
        <div class="t1-box">
            <input type="text" id="t1" placeholder="请输入学校名称">
            <div class="search-icon"><img src="img/school-search.png" alt=""/></div>
        </div>
        <!--<input type="button" class="school-close" value="关闭"/>-->
        <ul id="ul1"></ul>
    </div>
    <div class="addschool w640">
        <div class="school-cover"></div>
        <div class="t2-box">
            <input type="text" id="t2" placeholder="请输入学校名称">
            <input class="bt2" type="button" value="提交"/>
        </div>
        <!--<input type="button" class="school-close" value="关闭"/>-->

    </div>
    <iframe style="width:0; height:0; margin-top:-10px;" name="submitFrame" src="about:blank"></iframe>
</body>
</html>