【PHP【实战训练】系统性学习】——最经典的web端头像上传,数据库内容安全精简

news2024/11/23 22:51:41

在这里插入图片描述


👨‍💻个人主页:@开发者-曼亿点

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 曼亿点 原创

👨‍💻 收录于专栏:PHP程序开发

🅰

请添加图片描述


文章目录

    • 🅰
    • 前言
    • 🎶一、DataURL
    • 🎶二、目录处理
      • file_exists
    • 本案例代码运行后将会在当前路径创建images/N001目录,如下图所示。当刷新浏览器再次执行案列代码,将显示“存在”。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/9fd42198be2c4893be13cc9058f9b83f.png)
    • 🎶三、保存图片
    • 🎶四、文件上传
    • 🎶五、创造“我的”页面
    • 🎶六、保存图片地址
        • 结束语🥇


前言

  将首页面中的头像替换成WEUI中的组件,并可以上传图片进行修改,上传的图片将会被保存到任务中的images/id的文件夹中,如果id不存在,将会以用户的id创建文件夹。上传成功后,地址将会被写入数据库用户表中,如下图是运行效果图:
在这里插入图片描述


🎶一、DataURL


  数据URL,以该模式data:为前缀的URL,允许内容创建者将小文件嵌入文档中。一般来说,一个图片需要显示在网页上,通常会使用http链接:

<img src=" images/home.jng" alt=" ">

  这种方式中,img标记的src属性指定了一个本地或远程服务器上的资源。当网页加载到浏览器中时,浏览器会1针对每个外部资源都向服务器发送一次资源请求,占用网络加载资源。大多数的浏览器都有一个并发请求数不能超过某个值的限制。这意味着,如果一个网页里嵌入了过多的外部资源,这些请求会导致整个页面的加载延迟。
  而使用Data URL技术,图片数据以base64字符串格式嵌入到页面中,与HTML成为一体,使用data URL获取ICON图片可以写成:

<img src="data:image/png;base64,.......">

  数据URL由前缀(data:)、指示数据类型的MINME类型、base64标及数据本身,具体如下:

data;[<minm type>][;base64],<data>

参数描述如下:
  ①data:协议头,它标识这个内容为一个data URL资源。
  ②mine类型(可选项):浏览器通常使用mime类型(而不是文件扩展名)来确定如何处理文件。
  ③base64:数据编码方式,可将图片编码为一串字符。
  ④< data >:编码后的数据。


🎶二、目录处理


PHP使用mkdir()函数创建目录,如果成功,该函数则返回true;如果失败返回false。在任务中需要在服务器上创建目录,用存放在用户上传的图片照片。mkdir函数的语法格式如下:

mkdir(path);

path标识要创建的目录的名称。如果存在相同的目录,将会提示警告:File exists。

file_exists

file_exists ()函数检查文件或目录是否存在,如果指定的文件或目录存在,则返回true;否则返回false。file_ exists函数的语法式如下:

file_exists(path);

path 标识要判断的目录或文件的名称。
创建目录:

<?php
$str="images/my";
if(!file_exists($str)){
mkdir($str);
}else{
echo' 已存在';
}
?>

🐛index.js
定义一组数组:

Page({
    data:{
         arr1:['张三','李四','王五']
    }
})

本案例代码运行后将会在当前路径创建images/N001目录,如下图所示。当刷新浏览器再次执行案列代码,将显示“存在”。
在这里插入图片描述


🎶三、保存图片


PHP中使用file_put_coutents()函数把一个字符串写入文件中。由于上传的图片被转换为base64字符串,因此使用此函数保存图片就显得很合适。需要注意的是保存图片需要获取图片的数据,并将其解析后才能保存。
该函数访问文件时,如果文件不存在将创建一个文件。如果写入成功,该函数将返回写入文件中的字符数;如果失败,则返回false。file_put_contents函数的语法格式如下:

int file_put_coutents($filename,$data)

参数描述如下:
①filename:必写,规定要写入数据的文件。如果文件不存在,则创建一个新的文件。
②data:必写,规定要写入文件的数据。可以是字符串、数组或数据流,如果是base64字符串,需要将字符串解析后存储。

创建目录:

<?php
//接收上传的数据,(图片base+64)
$imgbase64=$_POST['imgbase64'];
//将base64解析为图片
$data=explode(',',$imgbase64)[1];
$img=base64_decode($data);
//图片上传到指定的途径,项目文件内
//没有路径创造路径
$str="images/my/";
if(!file_exists($str)){
    mkdir($str);
}
//获取上传图片的类型
$type=explode("/",explode(";",$imgbase64)[0])[1];
$imgName=date("Y-m-d")."-".uniqid().".".$type;
$imgsrc=$str.$imgName;
@file_put_contents($str.'header.png',$img);
?>

本案列代码运行后的结果展示:

在这里插入图片描述


🎶四、文件上传


前面解决了如何将base64的图片保存在指定的位置,那么如何上传图片呢?传统的方式是使用表单上传,本次任务使用AJAX POST方式实现异步图片上传。
使用JavaScript中的FileReader对象,异步图片上传将变得简单。其实现步骤如下:
①前端页面取得FileReader对象,FileReader是一种异步文件读取机制,结合input::file可以很方便的读取本文件;
②前端页面使用FileReader对象的readAsDataURL(file)方法读取文件内容,返回基于Base64编码的DataURL字符;
③前端页面读取DataURL字符串完成后,触发onload事件,执行POST请求,把读取的数据发送出去;
④服务器php文件获取DataURL数据,解析后保存图片到指定位置;
⑤服务器php文件将图片保存的位置写入数据库,并返回信息给前端页面;
⑥前端页面将上传的图片显示出来。

案例1——使用input标签和显示图片的div演示图片上传,通过FileReader对象读取上传的图片文件,POST提交到案例2中进行处理。

<script src="js/jquery-3.6.1.min.js"></script>
	<script type="text/javascript">
	function uploadimg(file) {console.log(file.files);
		//选择图片上传
		if (file.files && file.files[0]) {
			//创建文件读取对象
            var reader = new FileReader();
			//读取图片
			reader.readAsDataURL(file.files[0]);
			//onload该事件在读取操作完成时触发
            reader.onload = function (evt) {
                $.post(
					//上传的路径
					"imgLoad.php",
					{imgbase64: evt.target.result},
					function(rs){
						//将图片显示再界面上
						$('#uploaderFiles').html(
						'<li class="weui-uploader__file"' + 
						'style="background-image:url(' + evt.target.result + ')"></li>'
						);
               //
			   var obj=$.parseJSON(rs);
			   alert(obj.msg);
					}
				);
			};
             
		}
	}
	</script>

选择图片上传后,可以在浏览器中查看提交的信息。

案例2——保存图片

<?php
//接收上传的数据,(图片base+64)
$imgbase64=$_POST['imgbase64'];
//将base64解析为图片
$data=explode(',',$imgbase64)[1];
$img=base64_decode($data);
//图片上传到指定的途径,项目文件内
//没有路径创造路径
$str="images/my/";
if(!file_exists($str)){
    mkdir($str);
}
//获取上传图片的类型
$type=explode("/",explode(";",$imgbase64)[0])[1];
$imgName=date("Y-m-d")."-".uniqid().".".$type;
$imgsrc=$str.$imgName;
@file_put_contents($str.'header.png',$img);
echo $str .'/head01.png';
?>

选择图片上传后,注意的是,在存储图片时,代码固定为png格式,实际应用中应该获取上传图片的后缀名,以后缀名保存图片。


🎶五、创造“我的”页面


使用WeUI上传组件和底部导航组件构建“我的”页面,读者也可以直接拷贝资源中的index.html,重命名。给 页面添加访问控制,上传图片时使用POST提交图片数据案例4处理。

首先构建WeUI中的一行,然后将行分为三部分,分别是头部、主体和尾部。头部显示用户的头像,主体显示用户的姓名和电话,尾部显示上传按钮和退出按钮,当用户登录成功后,进入“我的”页面,点击上传按钮,选择新的图像上传,上传成功后,将会使用新的头像代替原来的头像。上传的流程图如下:
在这里插入图片描述

案例3——“我的”首页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页面</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<link rel="stylesheet" href="css/weui.css" />
		<!-- 自定义的css -->
		<link rel="stylesheet" href="css/demo.css" />
		<!-- 引入弹窗插件 -->
		<link rel="stylesheet" href="jquery-confirm/jquery-confirm.css">
	</head>
	<body ontouchstart>
		<?php
		//通过session获取登录信息
		session_start();
		$data=$_SESSION['login_status'];
		if($data==null){
			header("Refresh:1,Url=del.php");
		}
	
	
		?>
	<div style="margin: 10px;">
		<div class="weui-cells">
		    <div class="weui-cell">
				<!-- 放置头像 -->
		        <div class="weui-cell__hd">
		            <div class="weui-uploader">
		                <div class="weui-uploader__bd">
		                    <ul class="weui-uploader__files" id="uploaderFiles">
								<!-- 默认头像,实际地址从数据库用户表中获取 -->
								<li class="weui-uploader__file" 
								style="background-image: url(./images/me.png);">
								</li>
							</ul>  
		                </div>
		            </div>
		        </div>
		        <div class="weui-cell__bd" style="margin-left: 10px;">
		            <span><?php echo $data['name']?></span>
		            <div><?php echo $data['tel']?></div>
		        </div> 
				<div class="weui-cell__ft">
					<div class="weui-cell" style="padding: 0;">
				    <div class="weui-cell__hd">
						<!-- 点击上传头像,指定接收类型为image -->
						<div class="weui-uploader__input-box">
				        <input id="uploaderInput" class="weui-uploader__input" type="file" 
						accept="image/*" onchange="uploadimg(this)"/>
						</div>
					</div>
					<div class="weui-cell__ft">
						<a style="color: red;" href="loginOut.php">退出</a>
					</div>
					</div>
				</div> 
			</div>
		</div>
	</div>
		<div class="weui-tabbar" style="width: 100%; position: fixed; bottom: 0;">
			<div class="weui-tabbar__item">
				<div tyle="display: inline-block; position: relative;">
					<img src="./images/home.png" alt="" class="weui-tabbar__icon">
				</div>
				<p class="weui-tabbar__label"><a href="houta.php">首页</a></p>
			</div>
			<div class="weui-tabbar__item">
				<img src="./images/type.png" alt="" class="weui-tabbar__icon">
				<p class="weui-tabbar__label"><a href="cs.php">分类</a></p>
			</div>
			<div class="weui-tabbar__item">
				<div style="display: inline-block; position: relative;">
					<img src="./images/car.png" alt="" class="weui-tabbar__icon">
				</div>
				<p class="weui-tabbar__label">购物车</p>
			</div>
			<div class="weui-tabbar__item weui-bar__item_on">
				<img src="./images/me.png" alt="" class="weui-tabbar__icon">
				<p class="weui-tabbar__label">我</p>
			</div>
		</div>
	<!-- 引入jQuery和弹窗插件 -->
	<script src="js/jquery-3.6.1.min.js"></script>
	<script type="text/javascript">
	function uploadimg(file) {console.log(file.files);
		//选择图片上传
		if (file.files && file.files[0]) {
			//创建文件读取对象
            var reader = new FileReader();
			//读取图片
			reader.readAsDataURL(file.files[0]);
			//onload该事件在读取操作完成时触发
            reader.onload = function (evt) {
                $.post(
					//上传的路径
					"imgLoad.php",
					{imgbase64: evt.target.result},
					function(rs){
						//将图片显示再界面上
						$('#uploaderFiles').html(
						'<li class="weui-uploader__file"' + 
						'style="background-image:url(' + evt.target.result + ')"></li>'
						);
               //
			   var obj=$.parseJSON(rs);
			   alert(obj.msg);
					}
				);
			};
             
		}
	}
	</script>
	</body>
</html>

运行结果如图:
在这里插入图片描述


🎶六、保存图片地址


在案例3中,提交DataURL数据格式图片到指定的案例4中,案例4获取图片数据后进行解析,将解析的图片数据保存到指定目录,然后将图片地址写入数据库,并返回信息给调用者案例3进行图片更新。

用户表中增加头像字段,用储存上传到服务器的头像图片的地址。其结构如图:

在这里插入图片描述

案例4——保存图片地址

<?php
//接收上传的数据,(图片base+64)
$imgbase64=$_POST['imgbase64'];
//将base64解析为图片
$data=explode(',',$imgbase64)[1];
$img=base64_decode($data);
//图片上传到指定的途径,项目文件内
//没有路径创造路径
$str="images/my/";
if(!file_exists($str)){
    mkdir($str);
}
//获取上传图片的类型
$type=explode("/",explode(";",$imgbase64)[0])[1];
$imgName=date("Y-m-d")."-".uniqid().".".$type;
$imgsrc=$str.$imgName;
@file_put_contents($str.'header.png',$img);
//图片上传到数据库中去
//通过session获取登录信息
session_start();
$userInfo=$_SESSION['login_status'];
if($userInfo==null){
    header("Refresh:1,Url=del.php");
}
$obj=array("success"=>false,"msg"=>"图片上传失败,请稍后");
$conn=mysqli_connect("localhost","root","123456","shop");

$id=$userInfo['id'];
$sql="update users set img='$imgsrc' where Id=$id ";

$rs=mysqli_query($conn,$sql);
if($rs){
    $obj=array("success"=>true,"msg"=>"图片上传成功");
}
echo json_encode($obj);
//释放资源,关闭连接

mysqli_close($conn);
?>

运行代码如图:

在这里插入图片描述

图片保存成功后,当刷新页面再次进入首页时,发现图片还是默认的图片,我们希望在用户字段表中的img字段为空或依据图片地址找不到图片时,使用默认图像显示,否则直接显示用户表中的头像图片。
这个头像地址可以在用户登录时保存在会话中,这样可以直接使用了,修改目录中login.php的代码和案例3的代码。

登录成功时保存图片地址:

<div class="weui-cell__bd" style="margin-left: 10px;">
		            <span><?php echo $data['name']?></span>
		            <div><?php echo $data['tel']?></div>
		        </div> 

首页调用会话中的图片地址显示

<li class="weui-uploader__file" 
								style="background-image: url(./images/me.png);">
	</li>

退出登录后,再次运行案例3,登录成功后,用户的信息被保存在会话中,案例4首页可以获取登录时保存的信息,并现在页面中,其运行结果如下:
在这里插入图片描述

结束语🥇

以上就是PHP程序设计
持续更新PHP程序设计教程,欢迎大家订阅系列专栏🔥PHP程序开发你们的支持就是曼亿点创作的动力💖💖💖
请添加图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SpringBoot个人网盘系统-计算机毕业设计源码92922

摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势或改善自身的缺点&#xff0c;互联网的发展文件管理带来了福音。个人网盘系统是以实际运用为开发背景&#xff0c;运用软件工程原理和…

算法——Floyd判圈算法

介绍 Floyd判圈算法用于判断一个链表中是否有环。 思想 使用快慢指针fast, slow&#xff0c;快指针每次走两步fast fast.next.next&#xff0c;慢指针每次走一步slow slow.next。当出现fast null || fast.next null时&#xff0c;说明链表不存在环&#xff0c;如果存在环…

【python报错】关于 xlrd.biffh.XLRDError: Excel xlsx file; not supported 解决方法【已解决】

【Python报错】关于xlrd.biffh.XLRDError: Excel xlsx file; not supported解决方法【已解决】 在使用Python进行数据分析时&#xff0c;经常需要处理Excel文件。xlrd库是一个流行的用于读取Excel文件的库&#xff0c;但如果你在使用xlrd打开.xlsx文件时遇到了xlrd.biffh.XLRDE…

欢乐打地鼠小游戏html源码

这是一款简单的js欢乐打地鼠游戏&#xff0c;挺好玩的&#xff0c;老鼠出来用鼠标点击锤它&#xff0c;击中老鼠获得一积分。 欢乐打地鼠小游戏html源码

信息系统项目管理师0150:工具与技术(9项目范围管理—9.4收集需求—9.4.2工具与技术)

点击查看专栏目录 文章目录 9.4.2 工具与技术9.4.2 工具与技术 专家判断 收集需求过程中,应征求具备如下领域相关专业知识或接受过相关培训的个人或小组的意见,涉及的领域包括:可行性研究与评估;需求获取;需求分析;需求文件;以往类似项目的项目需求;图解技术;引导;冲…

这个国际档案日,大比武放榜、直播预约、课件下载,一样都不能少!

关注我们 - 数字罗塞塔计划 - 2024年6月9日第十七个国际档案日来临&#xff0c;数字罗塞塔计划放大招&#xff1a;第二届大比武活动榜单揭晓、ARCHE-2024上海智慧档案高峰论坛直播预约、2024上半年度课件大礼包下载。如此大礼&#xff0c;岂能错过&#xff1f; PART.01 榜单…

通过 Python+Nacos实现微服务,细解微服务架构

shigen坚持更新文章的博客写手&#xff0c;擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长&#xff0c;分享认知&#xff0c;留住感动。 个人IP&#xff1a;shigen 背景 一直以来的想法比较多&#xff0c;然后就用Python编写各种代码脚本。很多…

【线性代数】向量空间,子空间,向量空间的基和维数

向量空间 设V为n维向量的集合&#xff0c;如果V非空&#xff0c;且集合V对于向量的加法以及数乘两种运算封闭&#xff0c;那么就称集合V为向量空间 x&#xff0c;y是n维列向量。 x 向量组等价说明可以互相线性表示 向量组等价则生成的向量空间是一样的 子空间 例题18是三位向…

4.大模型微调技术LoRA

大模型低秩适配(LoRA)技术 现有PEFT 方法的局限与挑战 Adapter方法,通过增加模型深度而额外增加了模型推理延时。Prompt Tuning、Prefix Tuning、P-Tuning等方法中的提示较难训练,同时缩短了模型可用的序列长度。往往难以同时实现高效率和高质量,效果通常不及完全微调(f…

【每日算法】

算法第15天| (二叉树part02)层序遍历、226.翻转二叉树(优先掌握递归)、101. 对称二叉树(优先掌握递归) 文章目录 算法第15天| (二叉树part02)层序遍历、226.翻转二叉树(优先掌握递归)、101. 对称二叉树(优先掌握递归)一、层序遍历二、226. 翻转二叉树(优先掌握递归)三、101. 对…

小程序中实现自定义头部导航组件

在页面中实现自定义头部导航的组件&#xff0c;如果仅是单个页面中需要自定义可在页面的json文件中配置"navigationStyle": “custom”&#xff0c;如果是项目中所有页面都想使用自定义的组件&#xff0c;可在app.json的window中全局配置"navigationStyle"…

2024-6-9

今日安排&#xff1a; 学校的课程作业windows SEH 机制简单入门windows 用户态 pwn / 内核态入门 计网实验报告 && 网安实验报告继续审计 nf_tables 源码&#xff0c;主要看 active 相关逻辑。复现 CVE-2022-32250 这个漏洞【 && iptables 相关学习】♥♥♥♥…

【车载开发系列】MCU选型

【车载开发系列】MCU选型 【车载开发系列】MCU选型 【车载开发系列】MCU选型一. 重要概念二. MCU选型的风险风险1风险2 三. MCU选型要点四. MCU选型维度五. MCU 选型需要考虑的因素1&#xff09;ROM/RAM2&#xff09;速度/主频3&#xff09;分析外设需求4&#xff09;工作电压(…

idea编码问题:需要 <标识符> 非法的类型 、需要为 class、interface 或 enum 问题解决

目录 问题现象 问题解决 问题现象 今天在idea 使用中遇到的一个编码的问题就是&#xff0c;出现了这个&#xff1a; Error:(357, 28) java: /home/luya...........anageService.java:357: 需要 <标识符> Error:(357, 41) java: /home/luya............anageService.ja…

表达式求值的相关语法知识(C语言)

目录 整型提升 整型提升的意义 整型提升规则 整型提升实例 算术转换 赋值转换 操作符的属性 C语言的语法并不能保证表达式的执行路径唯一&#xff01;&#xff01;&#xff01; 问题表达式 整型提升 C的整型算术运算总是至少以缺省整型类型的精度来进行的。为了获得这…

基于SSM+Jsp的家用电器销售网站

开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包…

锂电池寿命预测 | Matlab基于SSA-SVR麻雀优化支持向量回归的锂离子电池剩余寿命预测

目录 预测效果基本介绍程序设计参考资料 预测效果 基本介绍 【锂电池剩余寿命RUL预测案例】 锂电池寿命预测 | Matlab基于SSA-SVR麻雀优化支持向量回归的锂离子电池剩余寿命预测&#xff08;完整源码和数据&#xff09; 1、提取NASA数据集的电池容量&#xff0c;以历史容量作…

LLVM Cpu0 新后端10

想好好熟悉一下llvm开发一个新后端都要干什么&#xff0c;于是参考了老师的系列文章&#xff1a; LLVM 后端实践笔记 代码在这里&#xff08;还没来得及准备&#xff0c;先用网盘暂存一下&#xff09;&#xff1a; 链接: https://pan.baidu.com/s/1yLAtXs9XwtyEzYSlDCSlqw?…

GitLab代码导出 gitlab4j-api 实现

目录 GitLab简介 GitLab 的主要特点包括&#xff1a; GitLab代码导出 gitlab4j-api 添加 gitlab4j-api 依赖 使用 gitlab4j-api 获取特定命名空间下的所有项目 说明 注意事项 GitLab简介 GitLab 是一个开源的代码仓库和协作平台&#xff0c;主要用于版本控制和源代码管理…

无人用过!QRTCN-BiLSTM实现区间预测!区间预测全家桶再更新!

声明&#xff1a;文章是从本人公众号中复制而来&#xff0c;因此&#xff0c;想最新最快了解各类智能优化算法及其改进的朋友&#xff0c;可关注我的公众号&#xff1a;强盛机器学习&#xff0c;不定期会有很多免费代码分享~ 今天对我们之前推出的区间预测全家桶再次进行更新&…