PHP 针对多用户 实现头像更换

    • 成品图
    • 思路
    • 登陆页面
      • 表单制作
      • 验证码制作
      • JavaScript刷新验证码
    • 验证页面
      • 验证逻辑
      • 页面跳转
        • header函数
        • Meta标签
        • JavaScript
    • 上传页面
      • 个人主页
      • 上传核心
    • 最终结果
      • 登陆页面
      • 验证结果
      • 个人主页
      • 最新头像
    • 总结

一个网站,其实说白了就是某几个特定功能的组合,而更换用户头像就在这些功能之中。今天就来做个测试,针对不同的用户,实现头像上传功能。


成品图

成品图

思路

  • 针对不同的用户上传头像,我们要为每一个已登录的用户创建一个文件夹,文件夹的名称以当前用户的用户名为准。

  • 用户上传成功后,跳转到用户登录成功后的页面,并刷新用户头像。

登陆页面

表单制作

<form role="form" action="./forindex.php"><div class="form-group"><label for="name">用户名</label><input type="text" class="form-control" id="username" name="username"placeholder="请输入名称"></div><div class="form-group"><label for="inputfile">文件输入</label><input type="password" id="inputfile" name="password"><p class="help-block">这里是块级帮助文本的实例。</p></div><div class="form-group"><label>请输入验证码</label><input type="text" id="checkcode" name="checkcode" /><img id="imagecheckcode" src="./store.php?r=<?php echo rand();?>" /><a href="javascript:void(0);" onclick="change()" >看不清</a></div><script>function change(){document.getElementById("imagecheckcode").src = "./store.php?r="+ Math.random();    }</script><button type="submit" class="btn btn-default">提交</button>
</form>

验证码制作

<?php
session_start();// 必须在php的最开始部分声明,来开启session// 使用gd的imagecreatetruecolor();创建一张背景图
$image = imagecreatetruecolor(100,40);// 生成填充色
$bgcolor = imagecolorallocate($image,255,255,255);
// 将填充色填充到背景图上
imagefill($image,0,0,$bgcolor); 生成随机4位字母以及数字混合的验证码
$checkcode='';
for($i=0;$i<4;$i++){$fontsize = rand(6,8);$fontcolor = imagecolorallocate($image,rand(0,255),rand(0,255),rand(0,255));// 为了避免用户难于辨认,去掉了某些有歧义的字母和数字$rawstr = 'abcdefghjkmnopqrstuvwxyz23456789';$fontcontent = substr($rawstr,rand(0,strlen($rawstr)),1);// 拼接即将诞生的验证码$checkcode.=$fontcontent;// 避免生成的图片重叠$x += 20;$y = rand(10,20);imagestring($image,$fontsize,$x,$y,$fontcontent,$fontcolor);   
}
// 保存到session变量中
$_SESSION['checkcode']=$checkcode;// 生成一些干扰的点,这里是200个
for($i=0;$i<200;$i++){$pointcolor = imagecolorallocate($image,rand(50,255),rand(50,255),rand(50,255));imagesetpixel($image,rand(0,100),rand(0,30),$pointcolor);
}
// 生成一些干扰线 这里是4个
for($i=0;$i<4;$i++){// 设置为浅色的线,防止喧宾夺主$linecolor = imagecolorallocate($image,rand(50,255),rand(50,255),rand(50,255));imageline($image,rand(0,99),rand(0,29),rand(0,99),rand(0,29),$linecolor);}header('content-type:image/png');imagepng($image);// 释放资源,销毁执行对象
imagedestroy($image);

JavaScript刷新验证码

<a href="javascript:void(0);" onclick="change()" >看不清</a>
<script>function change(){document.getElementById("imagecheckcode").src = "./store.php?r="+ Math.random();    }
</script>

验证页面

由于本次试验最核心的是对用户头像的更换,所以用户名我们暂且不管,以Root为准。

验证逻辑

<?phpsession_start();header("Content-Type:text/html;charset=utf-8");$username = $_REQUEST['username'];$password = $_REQUEST['password'];if(strtolower($_REQUEST['checkcode']==$_SESSION['checkcode'])){if(!is_dir($username)){mkdir($username);}echo "恭喜您,登陆成功!"."<br />3秒后将自动跳转到个人主页!";$_SESSION['username'] = $username;header("refresh:3;url=./personalpage.php");}else{echo "对不起,登陆失败了!";header("refresh:3;url=./index.php");//echo "<script>window.location.href='./index.php'</script>";   }

页面跳转

在PHP中,要先实现页面的跳转,有很多方式。本文使用了增加header信息的方式,下面介绍几个关于页面跳转的小实例。

header函数

<  ?php 
//重定向浏览器
header("Location: http://blog.csdn.net/marksinoberg"); 
//确保重定向后,后续代码不会被执行 
exit;
?>

注意:Location和:之间不能有空格

Meta标签

<   meta   http-equiv = "refresh"  
content = "1;url=http://blog.csdn.net/marksinoberg" >

注意: content可以控制在几秒之内完成跳转。

JavaScript

<  ?php  
$ url  =  "http://bbs.lampbrother.net" ;  
echo " <   script   language = 'javascript'  
type = 'text/javascript' > ";  
echo " window.location.href = '$url' ";  
echo " <  /script > ";  
?>

注意: 使用JavaScript方式,代码放置的位置可以随意,只要是符合语法要求即可。

上传页面

个人主页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php session_start(); echo $_SESSION['username']."的个人主页";   ?></title>
<style>img {width:128px;height:auto;    }
</style>
</head><body><div><img id="userphoto" src="./root/lover.png" /><br /><form action="./uploadphoto.php" method="post" enctype="multipart/form-data"><input type="file" name="photo"  /><input type="submit" onclick="uploadphoto()"  value="上传新头像"/></form><script>function uploadphoto(){document.getElementById("userphoto").src = "./root/<?php echo $_SESSION['username'];?>.png"}window.onload = function(){uploadphoto();  }</script>
</div></body>
</html>

上传核心

上传的核心还是一个表单,我们把要进行上传的图片上传到服务器,然后php使用move_uploaded_file来实现文件的迁移,实现上传。

<?phpsession_start();header("Content-Type:text/html;charset=utf-8");
// 附件的存储位置、附件的名字
$path = "./root/";$username = $_SESSION['username'];
// 拼接成该文件在服务器上的名称
$server_name = $path.$username.".png";if($_FILES['photo']['error']>0) {die("出错了!".$_FILES['photo']['error']); 
}
if(move_uploaded_file($_FILES['photo']['tmp_name'],$server_name)){//echo "<BR>"."Upload Success!";echo "恭喜您,上传成功!"."<br />3秒后将自动跳转到个人主页!";    header("refresh:3;url=./personalpage.php");
}else{//echo "<BR>"."Upload Failed!".$_FILES['photo']['error'];  echo "对不起,上传头像失败了!";header("refresh:2;url=./index.php");
}
?>

最终结果

登陆页面

登陆首页

验证结果

验证输入的信息是否正确

个人主页

用户个人主页

最新头像

最新头像

总结

回顾一下,本次试验的收获。

  • session的开启必须在php文件的开头session_start()
  • php可以实现的页面跳转的方式
  • 上传文件
  • 验证码制作与使用
  • JavaScript:void(0);的使用核心

大致的内容就是这么多,虽然没有增加美化效果,但是麻雀虽小,五脏也算是俱全了。

:-)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/17576.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

头像修改功能的实现

头像修改功能的实现 介绍 本文编写了前端和后端&#xff0c;一起实现了上传图片同步显示并且通过后端保存图片到本地目录。前端修改图片按钮样式 功能实现&#xff1a;首先设置原本的文件选择器不显示&#xff0c;也就是display&#xff1a;none&#xff1b;然后写下图片img标…

5分钟实现Android中更换头像功能

5分钟实现Android中更换头像功能 本文原创&#xff0c;转载请经过本人准许 写在前面&#xff1a; 更换头像这个功能在用户界面几乎是100%出现的。通过拍摄照片或者调用图库中的图片&#xff0c;并且进行剪裁&#xff0c;来进行头像的设置。 功能相关截图如下&#xff1a; 下面…

点击头像选择图片更换头像

效果图如下所示(视频再转格式的时候被挤变形了一点&#xff0c;各位童鞋将就一下&#xff0c;嘻嘻)&#xff1a; 关键代码&#xff08;html&#xff09;&#xff1a; <span class"headerSpan"><img class"headerImg" :src"headerUrl"&g…

chatgpt赋能python:Python图标为什么会变成白色?

Python图标为什么会变成白色&#xff1f; 最近&#xff0c;你可能已经注意到了一个很奇怪的现象&#xff0c;Python官网上的ICON图标变成了白色。对于许多Python用户来说&#xff0c;这个变化似乎令人困惑甚至恼火。今天&#xff0c;我们来了解一下这个问题的原因&#xff0c;…

FinChat - 金融行业的合规即时通讯工具

对于金融行业而言&#xff0c;不论是企业微信还是钉钉&#xff0c;都不是最佳的选择&#xff0c;这等同于把数据的控制权交给阿里腾讯。金融机构对数据非常敏感&#xff0c;对数据的安全、合规、保密、留痕的要求也远远超过其他行业。数据就是的数字时代的金矿&#xff0c;是金…

python简易语音助手

先上图 本程序使用的软件&#xff1a; PyCharm&#xff0c;Designer&#xff08;PyQt5界面编辑软件&#xff09; 步骤 1.使用designer绘制出程序界面的图,新建文件选择main windows 使用的控件&#xff1a; 按键 文本框 Line Edit 过程条 Priogress Bar 这里是装饰的一个作…

使用小爱同学语音控制电脑关机 - Winform C#

使用小爱同学语音控制电脑变关机 前言实现原理准备注册巴法云账号接入巴法云接入米家 编写程序连接TCP接收信息并运行关机指令发送指令订阅主题添加心跳机制后台运行阻止默认关闭窗口事件 完整代码 前言 小爱同学应该已经是家喻户晓的了&#xff0c;现在一直用来控制家里的家电…

用Kotlin开发智能语音助手,打造一款“懂你”的对话精灵

简介 Hi&#xff0c;各位同学大家好&#xff0c;我有新课上线啦&#xff0c;距离上一门课程已经过去九个月了&#xff0c;这门课的知识点是以Kotlin为主的&#xff0c;自Kotlin被Google转正之后&#xff0c;这门语言就备受我们Android开发者的关注&#xff0c;经过几年的发展下…

用Python程序实现语音识别就是这么简单!​

前言 Python程序提供了其他技术无法比拟的交互性和可访问性&#xff0c;重要的是&#xff0c;在 Python 程序中实现语音识别非常简单。我们一起来了解python程序的&#xff1a;语音识别的工作原理、PyPI 支持哪些软件包以及如何安装和使用 SpeechRecognition 软件包&#xff0…

树莓派小爱同学、天猫精灵、智能音箱、百度语音极速版、百度语音标准版、语音识别、语音合成终极方案

第一句话&#xff0c;python2版本的代码&#xff0c;python3你改改就完事了 流程图如下&#xff1a; 全套教程下载地址点击下载 首先需要调用这个方法安装百度的语音识别 https://ai.baidu.com/ai-doc/SPEECH/Bk4o0bmt3 安装使用Python SDK有如下方式&#xff1a; 如果已安…

uniapp开发微信小程序实现语音识别,使用微信同声传译插件,

第一步&#xff1a;在微信小程序管理后台&#xff1a;“设置”-》“第三方设置”-》“插件管理”中添加插件。 但是这个地方&#xff0c;没有搜索到插件&#xff0c;就到微信服务市场 搜索到以后添加到需要的小程序里面&#xff0c;然后返回管理中心查看&#xff0c;就可以看…

小白也可以学会小爱同学语言控制灯

教程 软件准备 电脑端安装Arduino软件&#xff0c;手机端安装点灯科技APP&#xff0c;以及米家APP和小爱音响。 电脑端所需以及点灯科技APP都在在网盘资料文件夹中&#xff0c;需要网盘资源的评论区找我要。 硬件准备 小爱音响一个 ESP8266模块一个 舵机一个 硬件连接 …

基于Blinker的小爱同学语音控制【脱坑指南】

基于Blinker的小爱同学语音控制ESP8266 前些天在使用esp8266时遇到很多小爱不能控制设备问题&#xff0c;现在来叙述我控制过程中所遇到的问题&#xff0c;以及到完整的小爱能成功控制Esp8266的过程。 1.需要先安装8266_package_2.7.4.exe,不然不能够正确使用&#xff0c;相关…

国产开源版「ChatGPT插件系统」来了!豆瓣、搜索一应俱全,清华、面壁智能等联合发布...

视学算法报道 编辑&#xff1a;好困 【导读】近期&#xff0c;面壁智能联合来自清华、人大、腾讯的研究人员共同发布了中文领域首个基于交互式网页搜索的问答开源模型WebCPM&#xff0c;这一创举填补了国产大模型该领域的空白。面壁智能自研工具学习引擎BMTools也因此被成功实…

多快好省的多样算力,让下一代互联网如你所愿

从前段时间让所有人刮目相看的AI绘画&#xff0c;到最近火爆全网的CharGPT&#xff0c;2022年的互联网行业为我们贡献了无数新鲜点子和妙哉的应用&#xff0c;始终令人回味无穷。回首这一年&#xff0c;我们好像并没有见证新的“杀手级”应用诞生&#xff1b;但仔细回味&#x…

泰坦号内爆5位富豪遇难!AI复原最后恐怖瞬间,设计缺陷真相公开

转自&#xff1a;新智元 30美元游戏手柄可操控潜水器&#xff1f;一系列巨大设计缺陷&#xff0c;注定了5位富人「泰坦尼克号」残骸之旅是一场生命的豪赌。 失踪4天&#xff0c;深海「泰坦号」潜水器竟灾难性内爆。 5位乘员全部遇难&#xff01; 与爆炸不同&#xff0c;内爆是一…

独家 | 100位特邀用户亲测GPT-4,带来超预期体验!

GPT-4.0作为近年来自然语言处理领域的一项重要突破&#xff0c;备受人们关注和期待。为了助力用户全面理解和高效使用该技术&#xff0c;Beezy团队迅速实现GPT-4.0 API对接&#xff0c;并推出GPT-4.0免费体验官计划。 近期&#xff0c;首期体验官活动完美结束&#xff0c;Beez…

【大模型】创新工场AI工程院执行院长:后GPT时代,多模态是最大的机会

目录 核心观点 大语言模型的“垄断”与“白菜化” 多模态AI的广阔天地

后GPT时代,多模态是最大的机会

作者 | 王咏刚&#xff0c;SeedV实验室创始人/CEO&#xff0c;创新工场AI工程院执行院长 我既是软件工程师&#xff0c;也是投资人和创业者。我曾参与多个成功 AI 项目的创建、孵化或投资。今天&#xff0c;ChatGPT 开启了崭新的 AI 2.0 时代&#xff0c;我个人也全力投入到一…

chatGPT智能AI,就是一次未来新革命!

hatGPT一经面世&#xff0c;立刻就火爆全世界&#xff0c;国内还无法直接使用&#xff0c;居然成为全球热度第一名&#xff1b;如果说不是一次全新的革命科技&#xff0c;又怎么能会那么高的热度&#xff1f;毕竟这个不是平常的八卦新闻。 很多人还不以为然&#xff0c;这完全…