signup图片上传预览经常总结

一个人想着一个人 提交于 2019-12-02 22:48:54

html

<html>
    <head> 
        <meta charset="utf-8" /> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
        <meta name="format-detection" content="telephone=no" /> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
        <meta name="applicable-device" content="pc,mobile" /> 
        <title>2019智能硬件高峰论坛简介|智能硬件高峰论坛报名通道|智能硬件开发者大会</title> 
        <meta name="keywords" content="智能硬件高峰论坛" /> 
        <meta name="description" content="2019智能硬件高峰论坛将于12月28日在广东佛山隆重举行,本次论坛以“新商业 新智能”为主题,交流在新商业环境下,商用智能如何以创新成果为核心不断推动新商业模式出现与发展;现邀请业内智能硬件相关专家、企业、技术人员共聚一堂交流探讨智能硬件发展趋势,碰撞出新的思维,共同建造智能硬件行业共生共赢的生态圈" /> 
        <!--[if lt IE 9]>
              <script src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>
              <script type='text/javascript'>
              alert("为了达到最佳的预览效果,请将您的浏览器升级到IE9以上!")
              </script>
              <![endif]--> 
        <link href="css/shop2.css" rel="stylesheet" type="text/css" /> 
        <!--        <script src="js/jquery1.42.min.js" type="text/javascript"></script>--> 
        <script src="js/jquery.min.js" type="text/javascript"></script> 
        <link rel="stylesheet" href="wow/animate.css" /> 
        <link rel="stylesheet" href="css/citySelect.css" /> 
        <style>
            .register_con{
                top:0%;
                color:white;
                margin-top: 0px;
                margin-bottom: 0px;
                padding-bottom: 75px;
                background: url("image/4.jpg")  center center no-repeat;
                background-size: 100% 860px;
                text-align: center
            }

            .part2{
                top:0%;
                margin:0 auto;
                max-height:185px;
                max-width:1000px;
                color:white;
                font-size: 12px;
                margin-top: 0px;
                margin-bottom: 0px;
                padding-bottom: 150px;
                background: url("image/2.jpg")  center center no-repeat;
                background-size: 100% 185px;
                text-align: left;
                padding-left:10px;
                padding-right:10px;
            }

            #p1{
                font-size: 12px;
            }

            .register_con .globle_nav li a{
                color:black;
            }
            .register_con .r_left .r_title{
                color:black;
            }

            .input1{
                width: 270px;
                height: 44px;
                border: solid 1px #ccc;

                margin-bottom: 13px;
                border-radius: 5px;
            }




        </style> 
        <script src="wow/wow.min.js" type="text/javascript"></script> 
        <script type="text/javascript" src="js/shop.js"></script> 
        <script type="text/javascript">
            new WOW().init();
        </script> 
        <script>
            //图片上传预览    IE是用了滤镜。
            function previewImage(file)
            {
                var MAXWIDTH = 90;
                var MAXHEIGHT = 90;
                var div = document.getElementById('preview');
                if (file.files && file.files[0])
                {
                    div.innerHTML = '<img id=imghead onclick=$("#previewImg").click()>';
                    var img = document.getElementById('imghead');
                    img.onload = function () {
                        var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                        img.width = rect.width;
                        img.height = rect.height;
                        //                 img.style.marginLeft = rect.left+'px';
                        img.style.marginTop = rect.top + 'px';
                    }
                    var reader = new FileReader();
                    reader.onload = function (evt) {
                        img.src = evt.target.result;
                    }
                    reader.readAsDataURL(file.files[0]);
                } else //兼容IE
                {
                    var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
                    file.select();
                    var src = document.selection.createRange().text;
                    div.innerHTML = '<img id=imghead>';
                    var img = document.getElementById('imghead');
                    img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
                    var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                    status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);
                    div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"'></div>";
                }
            }
            function clacImgZoomParam(maxWidth, maxHeight, width, height) {
                var param = {top: 0, left: 0, width: width, height: height};
                if (width > maxWidth || height > maxHeight) {
                    rateWidth = width / maxWidth;
                    rateHeight = height / maxHeight;

                    if (rateWidth > rateHeight) {
                        param.width = maxWidth;
                        param.height = Math.round(height / rateWidth);
                    } else {
                        param.width = Math.round(width / rateHeight);
                        param.height = maxHeight;
                    }
                }
                param.left = Math.round((maxWidth - param.width) / 2);
                param.top = Math.round((maxHeight - param.height) / 2);
                return param;
            }
        </script> 
    </head> 
    <body> 
        <div style="text-align: center;"> 
            <img class="login_img" src="image/1.jpg" style="width: auto;
                 height: auto;max-width: 100%;" alt="2018智能硬件高峰论坛主题&quot;/" /> 
        </div> 
        <div class="part2">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;自2015年起广东天波信息技术股份有限公司已连续主办三届“智能硬件高峰论坛”,有超千名智能硬件相关行业的人员参加。智能硬件高峰论坛旨在提供一个平台让智能硬件相关专家、企业、技术人员共聚一堂交流探讨智能硬件发展趋势,碰撞出新的思维,共同建造智能硬件行业共生共赢的生态圈。<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本次论坛以“智能商业驱动智慧场景”为主题,人脸识别、5G、刷脸支付等成为2019年行业年度热词,技术成熟意味着更多场景的改变与提升。今年,我们将深入探讨智能商业的技术与设想如何驱动场景,让科技更好地触达生活,并畅想未来科技发展的蓝图。此次论坛汇聚行业大咖、技术专家等共同探讨智能商业未来发展趋势,相信大咖碰撞能产生更多智慧火花。 
        </div> 
        <div style="text-align: center;"> 
            <img class="login_img" src="image/3.jpg" style="width: auto;
                 height: auto;max-width: 100%;" alt="2018智能硬件高峰论坛详细简介&quot;/" /> 
        </div> 
        <div class="register" style="height: 853px;"> 
            <!--            <img class="login_img" src="../images/login.jpg" alt=2018智能硬件高峰论坛简介"/>--> 
            <!--            <div class="fixed2">--> 
            <!--                <div class="w1200">--> 
            <!--                    <a href="index.php"><img src="../images/logo_shop.png" alt=2018智能硬件高峰论坛报名区域"/></a>--> 
            <!--<!--                    <div class="go_login">已有账号?<a href="../person_login.php">请登录</a></div>--> 
            <!--                </div>--> 
            <!--            </div>--> 
            <div class="register_con" style="color:black"> 
                <div class="r_left" style="width:100%;text-align: center"> 
                    <!--                    <div class="r_title">我要报名</div>--> 
                    <form id="form1" enctype="multipart/form-data">
                        姓  名:
                        <input class="input1" id="name" name="name" type="text" maxlength="20" placeholder="请输入姓名" value="" />
                        <font color="red">&nbsp;*</font>
                        <br /> 职  位:
                        <input class="input1" id="position" name="position" type="text" maxlength="20" placeholder="请输入职位" value="" />&nbsp;&nbsp;&nbsp;
                        <br /> 手机号码:
                        <input class="input1" id="phone" name="phone" type="text" maxlength="11" placeholder="请输入手机号码" value="" />
                        <font color="red">&nbsp;*</font>
                        <br /> 公司名称:
                        <input class="input1" id="company" name="company" type="text" maxlength="20" placeholder="请输入公司名称" value="" />
                        <font color="red">&nbsp;*</font>
                        <br /> 邀&nbsp;&nbsp;请&nbsp;&nbsp;人&nbsp;: 
                        <select id="inviter" class="input1" name="inviter"> <option value="0">请选择邀请人</option> <option value="陈秉俊">陈秉俊</option> <option value="郭锦杭">郭锦杭</option> <option value="彭维鹏">彭维鹏</option> <option value="黎达丰">黎达丰</option> <option value="李活">李活</option> <option value="雷超">雷超</option> <option value="林福">林福</option> <option value="张焱">张焱</option> <option value="王虎">王虎</option> <option value="吕焯业">吕焯业</option> <option value="区沛文">区沛文</option> <option value="李龙飞">李龙飞</option> <option value="采购部">采购部</option> <option value="财务部">财务部</option> <option value="财务部">行政部</option> <option value="营销中心">营销中心</option> <option value="国际事业部">国际事业部</option> <option value="国际事业部">融合通讯事业部</option> </select> 
                        <!--                        <div class="search">--> 
                        <!--                            <div class="citySelect">--> 
                        <!--                                <span class="cityName">邀请人</span>--> 
                        <!--                                <i class="iconDown"></i>--> 
                        <!--                                <i class="line"></i>--> 
                        <!--                            </div>--> 
                        <!----> 
                        <!--                            <div class="dropDown">--> 
                        <!--                                <div class="dropProv">--> 
                        <!--                                    <ul class="dropProvUl dropUl"></ul>--> 
                        <!--                                </div>--> 
                        <!--                                <div class="dropCity">--> 
                        <!--                                    <ul class="dropCityUl dropUl"></ul>--> 
                        <!--                                </div>--> 
                        <!--                            </div>--> 
                        <!--                        </div>--> 
                        <font color="red">&nbsp;*</font> 
                        <br /> 
                        <br /> 
                        <!--                                <input type="file" class="input1" name="photo" >&nbsp;&nbsp;&nbsp;&nbsp;<br/>--> 
                        <div class="col-sm-9 big-photo"> 
                            <div> 
                                <div style="width:30%;float:left;display: inline-block;text-align: right">
                                    上传照片:
                                    <br /> 
                                    <font size="2px">(本次高峰论坛采用人脸识别签到进场,请上传头像)</font> 
                                </div> 
                                <div id="preview" style="display: inline-block;text-align: left;margin-right: 5em;"> 
                                    <img id="imghead" border="0" src="image/photo_icon.png" width="90" height="90" onclick="$('#previewImg').click();" /> 
                                </div> 
                                <input type="file" onchange="previewImage(this)" style="display: none;" id="previewImg" name="photo" /> 
                                <!--<input id="uploaderInput" class="uploader__input" style="display: none;" type="file" accept="" multiple="">--> 
                            </div> 
                        </div> 
                        <br /> 
                        <input id="submit" class="submit" type="button" onclick="signup_submit()" value="立即报名" /> 
                    </form> 
                </div> 
                <br /> 
                <div style="text-align: center;"> 
                    <img src="image/qr.png" alt="2018智能硬件高峰论坛报名二维码&quot;/" /> 
                </div> 
                <div class="clear"></div> 
                <ul class="globle_nav"> 
                    <li><a href="http://www.telpo.cn/">首页</a></li> 
                    <li><a href="http://shop.telpo.cn/">天波商城</a></li> 
                    <li><a href="http://dingzhi.telpo.cn/">行业定制</a></li> 
                    <li><a href="http://www.telpo.cn/school.php">天波学院</a></li> 
                    <li><a href="http://www.telpo.cn/about.php">关于天波</a></li> 
                </ul> 
                <div>
                    <p id="p1">版权所有 &copy; 2005-2018 广东天波信息技术股份有限公司 <a rel="nofollow" href="http://www.miitbeian.gov.cn/" target="_blank"><font color="black">粤ICP备09005763号-3</font></a></p> 
                    <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
         document.write(unescape("%3Cspan id='cnzz_stat_icon_1264610252'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s13.cnzz.com/z_stat.php%3Fid%3D1264610252%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
                </div> 
            </div> 
        </div> 
        <script>
            $(function () {
                $('.register').height(window.innerHeight);
            });


            function signup_submit() {
                console.log($('#imghead')[0].src);
                if ($("#name").val().trim().length == 0) {
                    alert("姓名不能为空");
                    return false;
                }
                var patt = /^1\d{10}$/;
                if ($("#phone").val().trim().length != 11 || !patt.test($("#phone").val().trim())) {
                    alert("手机号码格式不正确");
                    return false;
                }
                if ($("#company").val().trim().length == 0) {
                    alert("公司名称不能为空");
                    return false;
                }
                if ($("#inviter").val().trim() == "0") {
                    alert("请选择邀请人");
                    return false;
                }
                var formData = new FormData($('#form1')[0]);
                //var file = $('input[type="file"]').files[0];
                //formData.append('photo', file);
                //formData.append('name', $("#name").val().trim());
                //formData.append('position', $("#position").val().trim());
                //formData.append('phone', $("#phone").val().trim());
                //formData.append('company', $("#company").val().trim());
                //formData.append('inviter', $("#inviter").val().trim());
                //console.log(formData.get('file'));
                $.ajax({
                    url: 'signup.php?act=reg',
                    type: 'POST',
                    cache: false,
                    data: formData,
                    dataType: 'json',
                    async: false, //同步
                    processData: false, //不需要对数据做任何预处理
                    contentType: false, //不设置数据格式
                    beforeSend: function () {
                        $("#submit").val('正在提交...');
                        $("#submit").prop('disabled', 'disabled');
                    },
                    complete: function () {
                        $("#submit").val('立即报名');
                        $("#submit").removeAttr("disabled");
                    }
                }).success(function (res) {
                    if (res.code != "0000") {
                        console.log(res.msg);
                    } else {
                        $('#form1')[0].reset();
                    }
                    alert(res.msg);
                }).fail(function (res) {
                    console.log(res)
                });
            }
        </script> 
        <script type="text/javascript" src="js/citySelect.js"></script>   
    </body>
</html>

 

php

<?php
@ini_set("display_errors", "Off");
@error_reporting(0);
require 'autoloader.php';
function getrandstr(){
    $str='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890';
    $randStr = str_shuffle($str);//打乱字符串
    $rands= substr($randStr,0,6);//substr(string,start,length);返回字符串的一部分
    return $rands;
}

try{
    if(isset($_GET['act']) && $_GET['act']=='reg'){
        $db_config = require 'config/db.php';
        $db = Pdo_db::get_instance(
            array(
                'dns'=>'mysql:host='.$db_config['host'].';dbname='.$db_config['db'],
                'username'=>$db_config['user'],
                'password'=>$db_config['passwd']
            )
        );

        $name = trim($_POST['name']);
        $position = trim($_POST['position']);
        $phone = trim($_POST['phone']);
        $company = trim($_POST['company']);
        $inviter = trim($_POST['inviter']);
        $photo = '';
        $ctime = date('Y-m-d H:i:s');
        $sql = " SELECT * FROM `user` WHERE `phone` = :phone limit 1 ";
        $list = $db->query($sql, array(':phone' => $phone));
        if(empty($name) || mb_strlen($name,'utf8')>20){
            throw new Exception('姓名格式不正确', 1001);
        }
        if(!preg_match('/^1\d{10}$/', $phone)){
            throw new Exception('手机号码格式不正确', 1002);
        }
        if(empty($company) || mb_strlen($company,'utf8')>20){
            throw new Exception('公司格式不正确', 1003);
        }
        if(empty($inviter) || mb_strlen($inviter,'utf8')>20){
            throw new Exception('邀请人格式不正确', 1004);
        }
        if(count($list)){
            throw new Exception('手机号码已经注册', 1005);
        }
        if ((($_FILES["photo"]["type"] == "image/gif")
                    || ($_FILES["photo"]["type"] == "image/jpeg")
                    || ($_FILES["photo"]["type"] == "image/pjpeg")
                    || ($_FILES["photo"]["type"] == "image/png"))
                && ($_FILES["photo"]["size"] < 10 * 1024 * 1024))
        {
            if ($_FILES["photo"]["error"] <= 0)
            {
                $photo = getrandstr().'_'.strtotime('now').'.'.pathinfo($_FILES["photo"]["name"], PATHINFO_EXTENSION);
                if (!file_exists("upload/" . $photo))
                {
                    @move_uploaded_file($_FILES["photo"]["tmp_name"], "upload/" . $photo);
                }
            }else{
                throw new Exception('上传图片信息不正确', 1006);
            }
        }
        if($photo){
            $photo = 'http://112.74.168.224/signup/upload/'.$photo;
        }
        $sql = " INSERT INTO `user`(`name`,`position`, `phone`, `company`, `inviter`, `photo`, `checked`, `activity_id`, `ctime`)VALUES(:name, :position, :phone, :company, :inviter, :photo, 0, 1, :ctime) ";
        $rowcount = $db->insert($sql, array(
            ':name' => $name,
            ':position' => $position,
            ':phone' => $phone,
            ':company' => $company,
            ':inviter' => $inviter,
            ':photo' => $photo,
            ':ctime' => $ctime
        ));
        $return = array(
                'code' => 0000,
                'msg' => '资料提交成功!我们会尽快通过短信与您联系,感谢您的支持!',
                'data' => array('rowcount'=>$rowcount)
                );
    }else{
        throw new Exception('请求url或参数不正确', 1008);
    }
}catch(Exception $e){
    $return = array(
        'code' => $e->getCode(),
        'msg' => $e->getMessage()
    );
} finally {
    @header('Content-Type:application/json; charset=utf-8');
    echo json_encode($return, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES );
    exit();
}

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!