php实现头像上传预览功能
本文实例为大家分享了php实现头像上传预览功能的具体代码，供大家参考，具体内容如下
主页面1.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上传头像</title>
<style type="text/css">
*{
font-family:"微软雅黑";}
#zong{
/*border:1px solid black;*/
position:relative;
width:52%;
height:500x;
left:24%}
.nr{
float:left;
margin-right:30px;}
#yl{width:240px; height:240px; background-size:240px 240px;}
#file{width:240px; height:240px; float:left; opacity:0;}
</style>
</head>
<body>
<div id="zong">
<form id="sc" action="2.php" method="post" enctype="multipart/form-data" target="shangchuan">
<input type="hidden" name="tp" value="" id="tp" />
<div id="yl" style="background-image:url(./image/1.jpg)" class="nr">//头像显示的位置
<input type="file" name="file" id="file" onchange="document.getElementById('sc').submit()" />
</div>
<div class="nr">
</div>
</form>
<iframe style="display:none" name="shangchuan" id="shangchuan">
</iframe>
</div>
</body>
<script type="text/javascript">
//回调函数,调用该方法传一个文件路径，改变背景图
function showimg(url)
{
var div = document.getElementById("yl");
div.style.backgroundImage = "url("+url+")";
document.getElementById("tp").value = url;
}
</script>
</html>
处理页面2.php
<?php
session_start();
$uid = $_SESSION["uid"];
if($_FILES["file"]["error"])
{
echo $_FILES["file"]["error"];
}
else
{
if(($_FILES["file"]["type"]=="image/jpeg" || $_FILES["file"]["type"]=="image/png")&& $_FILES["file"]["size"]<1024000)
{
$fname = "./a/image/".date("YmdHis").$_FILES["file"]["name"]; //头像存储的路径
$filename = iconv("UTF-8","gb2312",$fname);
if(file_exists($filename))
{
echo "<script>alert('该文件已存在！');</script>";
}
else
{
move_uploaded_file($_FILES["file"]["tmp_name"],$filename);
unlink($_POST["tp"]);
echo "<script>parent.showimg('{$fname}');</script>";
}
}
}
打开显示:
点击图片位置弹出选择框：
选择图片完成后：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍Android实现头像上传功能，包括了Android实现头像上传功能的使用技巧和注意事项，需要的朋友参考一下 之前做这个头像上传功能还是花了好多时间的，今天我将我的代码分享给大家先看效果图 首先看上传图片的工具类，一点都没有少复制就可以用 从相册获取图片的方法 从系统相机拍照获取照片 调用系统裁剪工具裁剪图片 上传服务器的方法 重新服务器响应方法 重写这些方法需要实现接口 重写onA
-
安装及部署： 1. 上传到 apache，iis，tomcat 服务器，通过域名访问 index.html 例如：http://www.hdfu.net/index.html v1.8 1.优化摄像头拍照不清晰（目前支持高清） v1.7 1.优化三张预览图片失真 2.优化加载默认图片，图片上传体验 v1.6 1.修改默认图片小于300px，图片拉伸bug v1.5 1.修复图片像素
-
本文向大家介绍vue实现图片上传预览功能，包括了vue实现图片上传预览功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue实现图片上传预览的具体代码，供大家参考，具体内容如下 效果图 html结构 css样式 关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。 更多vue学习教程请阅读专题《vue实战教程》 以上就是本文的全部内容，希望对大家的学习有所
-
本文向大家介绍JS实现图片上传预览功能，包括了JS实现图片上传预览功能的使用技巧和注意事项，需要的朋友参考一下 废话不多说了，直接给大家贴js代码了，具体代码如下所示： 以上所述是小编给大家介绍的JS实现图片上传预览功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！
-
本文向大家介绍js实现图片上传并预览功能，包括了js实现图片上传并预览功能的使用技巧和注意事项，需要的朋友参考一下 本文为大家分享了js实现图片上传并预览的具体代码，供大家参考，具体内容如下 思路：完成这个功能，首先需要美化上传图片的按钮，然后添加一个<img/>标签，在图片上传之后，用新图片的src替换原来<img/>标签中的src。 如下图所示，是原始的按钮样式： 美化步骤： （1）将上传图片
-
本文向大家介绍JavaScript实现单图片上传并预览功能，包括了JavaScript实现单图片上传并预览功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JavaScript实现单图片上传并预览功能的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。