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日在广东佛山隆重举行，本次论坛以“新商业 新智能”为主题，交流在新商业环境下，商用智能如何以创新成果为核心不断推动新商业模式出现与发展;现邀请业内智能硬件相关专家、企业、技术人员共聚一堂交流探讨智能硬件发展趋势，碰撞出新的思维，共同建造智能硬件行业共生共赢的生态圈" />
<!--[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="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;">
<!-- <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"> *</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>
<!-- <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"> *</font>
<br />
<br />
<!-- <input type="file" class="input1" name="photo" > <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();" /> <!--图片内容base64预览和传输-->
</div>
<input type="file" onchange="previewImage(this)" style="display: none;" id="previewImg" name="photo" /> <!--$_FILES发生接收-->
<!--<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="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();
}
signup图片上传预览经常总结的更多相关文章
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- Jquery图片上传预览效果
uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...
- [前端 4] 使用Js实现图片上传预览
导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...
- Javascript之图片上传预览
使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...
- HTML5 图片上传预览
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- ASP.NET工作笔记之一：图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- js实现图片上传预览及进度条
原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...
- html 图片上传预览
Html5 upload img 2012年12月27日 20:36 <!DOCTYPE HTML> <html> <head> <meta http-equ ...
随机推荐
- LeetCode.876-链表的中间节点(Middle of the Linked List)
这是悦乐书的第337次更新,第361篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第206题(顺位题号是876).给定具有头节点的非空单链表,返回链表的中间节点.如果有两 ...
- 针对WordPress站点思路
一.使用WPscan 1).简介 WPScan是一个扫描 WordPress 漏洞的黑盒子扫描器,它可以为所有 Web 开发人员扫描 WordPress 漏洞并在他们开发前找到并解决问题.我们还使用了 ...
- vue分别打包测试环境和正式环境
vue打包时使用不同的环境变量 需求 同一个项目通过打包使用不同的环境变量,目前的环境有三个: 一.本地------开发环境 二.线上------测试环境 三.线上------正式环境 我们都知道vu ...
- Java String == && equal
[.net超级群:27921837] Java中equals和==的区别 java中的数据类型,可分为两类:1.基本数据类型,也称原始数据类型.byte,short,char,int,long,flo ...
- 如何上传大文件到github上
真的是被百度坑怕了,只适合我自己的 如果你之前安装git成功的话,右键会出现两个新选项,分别为Git Gui Here,Git Bash Here,这里我们选择Git Bash Here,进入如下界面 ...
- python winsound模块
(目标:出现交易下单.结束成交.数据中断等信号的时候,PC 发出声音提醒.) python winsound模块 winsound是Python的内置包,无需下载.可以直接通过 import wins ...
- LINUX “软链接”和“硬链接”的区别
今天在知乎上看到一篇十分有趣的问题: 如何评价微软高级工程师痴迷于soft link这一linux常见概念? 虽然又是知名撕逼王曾某的撕逼帖,但是我还是想就题目中链接的问题简单地讲讲. 什么是链接? ...
- [Python3] 001 "Hello World" 与注释
目录 1. 致敬 1.1 致敬 "Hello World" 1.2 致敬 Python 之父 Guido van Rossum 2. 注释 2.1 单行注释 2.2 多行注释 3. ...
- Windows netcat 的工具的简单使用
1. 下载 https://eternallybored.org/misc/netcat/ 2. 将目录添加到环境变量 C:\Work\netcat 3. 简单实验 4. 查看说明 UPDATE // ...
- gRPC go安装教程
安装protobuf go get -u github.com/golang/protobuf/proto go get -u github.com/golang/protobuf/protoc-ge ...