php实现头像上传预览功能


Posted in PHP onApril 27, 2017

本文实例为大家分享了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>";
    }
    
  }
}

打开显示:

php实现头像上传预览功能

点击图片位置弹出选择框:

php实现头像上传预览功能

选择图片完成后:

php实现头像上传预览功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
php 获取select下拉列表框的值
May 08 PHP
PHP正则表达式之定界符和原子介绍
Oct 05 PHP
浅析PHP中Collection 类的设计
Jun 21 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
Jul 01 PHP
php获取CSS文件中图片地址并下载到本地的方法
Dec 02 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
Dec 22 PHP
PHP+MySQL实现无极限分类栏目的方法
Dec 23 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
Mar 19 PHP
PHP 输出缓冲控制(Output Control)详解
Aug 25 PHP
Laravel学习教程之本地化模块
Aug 18 PHP
PHP PDOStatement::getAttribute讲解
Feb 01 PHP
PHP的new static和new self的区别与使用
Nov 27 PHP
php文件上传及下载附带显示文件及目录功能
Apr 27 #PHP
phpMyAdmin无法登陆的解决方法
Apr 27 #PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
Apr 27 #PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
Apr 27 #PHP
PHP实现的常规正则验证helper公共类完整实例
Apr 27 #PHP
php上传excel表格并获取数据
Apr 27 #PHP
PHP基于SMTP协议实现邮件发送实例代码
Apr 27 #PHP
You might like
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
用python与文件进行交互的方法
2018/03/01 Python
Python iter()函数用法实例分析
2018/03/17 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
医学院护理专业应届生求职信
2013/11/12 职场文书
三项教育活动实施方案
2014/03/30 职场文书
护士求职信
2014/07/05 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
立志成才演讲稿
2014/09/04 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
社保转移委托书范本
2014/10/08 职场文书
法制教育观后感
2015/06/17 职场文书
安全教育主题班会总结
2015/08/14 职场文书
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
MySQL笔记 —SQL运算符
2022/01/18 MySQL