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 ...
随机推荐
- STM32 USB开发(三) 基于F105RBT6核心板开发的自定义HID收发(FS)
硬件设计 该核心板的USB插口有两个,一个是用于USB Slave的,可以用来做HID设备,把模拟STM32模拟为U盘等:另一个是USB Host设备,可以对插上的U盘的数据进行读写. 图中J2是Mi ...
- Python_ONLINE_习题集_02 函数封装
2.1 封装函数实现如下要求 例如:输入2,5 则求:2 + 22+222 + 2222+22222的和 参考答案: https://www.bilibili.com/read/cv4185619 d ...
- 把对像生成json并存储到文件
1.创建实体对像json import com.alibaba.fastjson.annotation.JSONField; import java.util.Date; public class S ...
- CentOS7 安装dotnet sdk 2.1.401 的简单办法
1. 下载 linux版本的tar包 路径为: https://dotnet.microsoft.com/download/thank-you/dotnet-sdk-2.1.401-linux-x64 ...
- 获取IP地址的几种方法
根据ip获取地址的几种方法 1.调用新浪IP地址库 <script type="text/javascript" src="js/jquery.js"&g ...
- 搜索专题: HDU2102 A计划
这不知道是公主被抓走了第几次了,反正我们的骑士救就对了(别说了,我都救我都救...);这次的迷宫有些特别,双层,带电梯(?),而且这个电梯还有生命危险,可能会撞死(一层是电梯,一层是墙),或者永远困在 ...
- Building and booting Nexus 5 kernel
1. Downloading toolchain and setup. git clone https://android.googlesource.com/platform/prebuilts/gc ...
- Pure播放器
我是的本地应用,并不会拿你的隐私数据.
- [IIS]修改MaxFieldLength与MaxRequestBytes彻底解决Request Too Long的问题
当 IIS7/7.5 收到的请求头的长度超过16K(默认值),就会引发"Bad Request - Request Too Long. HTTP Error 400. The size of ...
- Nginx的端口修改问题
转自:https://www.cnblogs.com/fengyuhuawu/p/7867728.html 修改 nginx.conf 文件实现. 在 Linux 上该文件的路径为 /usr/loca ...