master

分支 (1)

管理

管理

master

beautyPhoto
/
myApplication2.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>
    <script src="js/jquery.form.js"></script>
    <style>

    </style>
    <script>
        setInterval(function(){
            console.log($('#t1').val())
        },10)
        $(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');
                            oLi.style.display='block';
                            oImg.src=this.result;
                            oLi.className='uploadBox imglist';
                            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%';
                    }
                }
            }


            $('#t1').keyup(function(){
                $.ajax({
                    url: 'http://app.missquq.com/api/school/listSchool',
                    data: {
                        name: this.value
                    },
                    jsonp: 'callback',    // cbName
                    dataType: 'jsonp', // 使用jsonp
                    success: function(json) {
                        var arr1=[];
                        $.each(json,function(i){
                            arr1.push(json[i].name);
                        });
//                        console.log(arr1);
                        $('#ul1').html('');
                        $.each(arr1,function(i){
                            var oLi = $('<li></li>');
                            oLi.html(arr1[i]);
                            $('#ul1').append(oLi);
                        });

                        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);
                        });
                    }
                });

            });

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


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

            $('#submit').on('click',function(){
                var formData = new FormData($("#form"));
                console.log(formData);
                $.ajax({
                    url: 'http://192.168.10.201:8080/say-web/trinee/addAlbum',
                    type:'post',
                    data: formData,
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
//                    jsonp: 'callback',    // cbName
                    dataType: 'jsonp', // 使用jsonp
                    success:function(json){
                        alert('成功了');
                        console.log(json);
                    },
                    error:function(data){
                        alert('没成功');
                    }
                });
            });

        });
    </script>
</head>
<body>
    <div class="container w640" id="main">
        <p class="basic-title">基本信息</p>
        <form action="http://192.168.20.147:8080/say-web/traineeJoin/addTraineeJoin" id="form"  method ="post" target="submitFrame" enctype="multipart/form-data">
            <ul class="infor-list">
                <li>
                    <span class="red_icon">真实姓名</span>
                    <input type="text" name="cnName" 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="请输入年级，例如：大一"/>
                    <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>
                            <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="button" value="提交" id="submit"/></p>
        </form>

    </div>
    <div class="search w640">
        <input type="text" id="t1" placeholder="请输入学校名称"><input class="bt1" type="button" value="保存"/>
        <ul id="ul1"></ul>
    </div>
    <div class="addschool w640">
        <input type="text" id="t2" placeholder="请输入学校名称"><input class="bt2" type="button" value="保存"/>
    </div>
<footer style="width: 100%; height: 100px;"></footer>
</body>
<iframe style="width:0; height:0; margin-top:-10px;" name="submitFrame" src="about:blank"></iframe>
</html>