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面向对象全攻略 (四)构造方法与析构方法
Sep 30 PHP
php中用数组的方法设置cookies
Apr 21 PHP
php中常用的预定义变量小结
May 09 PHP
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
Jun 25 PHP
PHP将两个关联数组合并函数提高函数效率
Mar 18 PHP
神盾加密解密教程(三)PHP 神盾解密工具
Jun 08 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
Mar 18 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
Apr 15 PHP
摘自织梦CMS的HTTP文件下载类
Aug 08 PHP
深入解析WordPress中加载模板的get_template_part函数
Jan 11 PHP
Laravel 微信小程序后端搭建步骤详解
Nov 26 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
Jan 26 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输出时间格式
2013/08/31 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
php获取excel文件数据
2017/04/21 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
Python实现把xml或xsl转换为html格式
2015/04/08 Python
Python闭包实现计数器的方法
2015/05/05 Python
python学习教程之使用py2exe打包
2017/09/24 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
python实现关键词提取的示例讲解
2018/04/28 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
Python实现手势识别
2020/10/21 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
如何让Java程序执行效率更高
2014/06/25 面试题
业务经理岗位职责
2013/11/11 职场文书
经销商订货会主持词
2014/03/27 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL