master

分支 (1)

管理

管理

master

beautyPhoto
/
myApplication3.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 sub(){
//            $.ajax({
//                type:'get',
//                cache: false,
//                dataType: "jsonp",
//                url:'http://192.168.20.147:8080/say-web/traineeJoin/addTraineeJoin1',
//                data:$('form').serialize(),// 你的formid
//                jsonp: "callback",
//              //  jsonpCallback:"callback",
//                async: false,
//                error: function(request) {
//                    alert('444')
//                    console.log(request);
//                },
//                success: function(data) {
////                    $("#commonLayout_appcreshi").parent().html(data);
//                    alert('666')
//                }
//
//            });
//        }

        $(document).ready(function(){
            var oLi1=$('#content li');
            oLi1.css('height',oLi1.width());
            checkForm('form');

            var count=0;
            var num=0;
            var oCon= document.getElementById("content");

            var oLi1=oCon.getElementsByTagName('li')[0];
            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")[num];
                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.createElement('li');
                            count++;
                            oLi.innerHTML='<div><img src="'+this.result+'" alt=""/></div>';
                            oLi.style.height=oLi.offsetWidth+'px';
                            oLi.className='imglist';
                            oCon.insertBefore(oLi,oCon.childNodes[0]);
                            setHeight();
                            setImg();
                        };
                    }
                    input.style.width="0px";
                    input.style.height="0px";
                    num++;
                    setInput();
                }

            }


            //动态设置图片的显示方式
            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 setInput(){
                if(num<=2){
                    var oInput=$('<input accept="image/*" type="file" class="file_inputs">');
                    $('.adds div').append(oInput);
                    getFile();
                }
            }

        });
    </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" enctype="multipart/form-data" method ="post" target="submitFrame">
            <ul class="infor-list">
                <li>
                    <span>真实姓名</span>
                    <input type="text" name="cnName" data-err="* 请输入2-4位汉字" placeholder="请输入真实姓名"/>
                    <b></b>
                </li>
                <li>
                    <span><i class="space">学</i><i>校</i></span>
                    <input type="text" name="school" data-err="* 请输入汉字" placeholder="请输入学校名称"/>
                    <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="relation">联系方式</span>
                    <input type="text" name="tel" data-err="* 请输入正确的手机号" placeholder="请填写手机号码"/>
                    <b></b>
                    <input type="text" name="weChat" data-err="* 请输入正确的微信号" placeholder="请填写微信号码"/>
                    <b></b>
                </li>
                <li>
                    <span>满意照片</span><p class="photo-hint">保证面部完整（最多三张）</p>
                </li>
                <div class="content contents" id="content">
                    <li class="adds">
                        <div>
                            <input accept="image/*" type="file" id="file_inputs" class="file_inputs">
                        </div>
                    </li>
                </div>
            </ul>
            <p class="subbox"><input type="submit" value="确定" id="submit"/></p>
        </form>
        <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>正确示范（高清、美颜、大长腿、统统来！）</p>
            <div>
                <img src="img/photo4.jpg" alt=""/>
                <img src="img/photo5.jpg" alt=""/>
                <img src="img/photo6.jpg" alt="" class="last"/>
            </div>
        </div>
    </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>