signup图片上传预览经常总结

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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日在广东佛山隆重举行，本次论坛以“新商业新智能”为主题，交流在新商业环境下，商用智能如何以创新成果为核心不断推动新商业模式出现与发展;现邀请业内智能硬件相关专家、企业、技术人员共聚一堂交流探讨智能硬件发展趋势，碰撞出新的思维，共同建造智能硬件行业共生共赢的生态圈" />

<link href="css/shop2.css" rel="stylesheet" type="text/css" />

<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="data:image/1.jpg" style="width: auto;
height: auto;max-width: 100%;" alt="2018智能硬件高峰论坛主题"/" />
</div>
<div class="part2">
        自2015年起广东天波信息技术股份有限公司已连续主办三届“智能硬件高峰论坛”，有超千名智能硬件相关行业的人员参加。智能硬件高峰论坛旨在提供一个平台让智能硬件相关专家、企业、技术人员共聚一堂交流探讨智能硬件发展趋势，碰撞出新的思维，共同建造智能硬件行业共生共赢的生态圈。<br />
        本次论坛以“智能商业驱动智慧场景”为主题，人脸识别、5G、刷脸支付等成为2019年行业年度热词，技术成熟意味着更多场景的改变与提升。今年，我们将深入探讨智能商业的技术与设想如何驱动场景，让科技更好地触达生活，并畅想未来科技发展的蓝图。此次论坛汇聚行业大咖、技术专家等共同探讨智能商业未来发展趋势，相信大咖碰撞能产生更多智慧火花。
</div>
<div style="text-align: center;">
<img class="login_img" src="data:image/3.jpg" style="width: auto;
height: auto;max-width: 100%;" alt="2018智能硬件高峰论坛详细简介"/" />
</div>
<div class="register" style="height: 853px;">







<div class="register_con" style="color:black">
<div class="r_left" style="width:100%;text-align: center">

<form id="form1" enctype="multipart/form-data">
姓名：
<input class="input1" id="name" name="name" type="text" maxlength="20" placeholder="请输入姓名" value="" />
<font color="red"> *</font>
<br /> 职位：
<input class="input1" id="position" name="position" type="text" maxlength="20" placeholder="请输入职位" value="" />   
<br /> 手机号码：
<input class="input1" id="phone" name="phone" type="text" maxlength="11" placeholder="请输入手机号码" value="" />
<font color="red"> *</font>
<br /> 公司名称：
<input class="input1" id="company" name="company" type="text" maxlength="20" placeholder="请输入公司名称" value="" />
<font color="red"> *</font>
<br /> 邀  请  人 ：
<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>
















<font color="red"> *</font>
<br />
<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="data: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" /> 

</div>
</div>
<br />
<input id="submit" class="submit" type="button" onclick="signup_submit()" value="立即报名" />
</form>
</div>
<br />
<div style="text-align: center;">
<img src="data:image/qr.png" alt="2018智能硬件高峰论坛报名二维码"/" />
</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">版权所有 © 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);
/*data:image/jpeg;base64,/9j/4U1wRXhpZgAATU0AKgAAAAgABgESAAMAAAABAAEAAAEaAAUAAAABAAAAVgEbAAUAAAABAAAAXgEoAAMAAAABAAIAAAITAAMAAAABAAEAAIdpAAQAAAABAAAAZgAAAMAAAABIAAAAAQAAAEgAAAABAAeQAAAHAAAABDAyMjGRAQAHAAAABAECAwCgAAAHAAAABDAxMDCgAQADAAAAAQABAACgAgAEAAAAAQAAD8CgAwAEAAAAAQAAC9CkBgADAAAAAQAAAAAAAAAAAAYBAwADAAAAAQAGAAABGgAFAAAAAQAAAQ4BGwAFAAAAAQAAARYBKAADAAAAAQACAAACAQAEAAAAAQAAAR4CAgAEAAAAAQAATEgAAAAAAAAASAAAAAEAAABIAAAAAf/Y/9sAhAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/3QAEAAr/wAARCAB4AKADASIAAhEBAxEB/8QBogAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoLEAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+foBAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKCxEAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhc…*/
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();
}