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下打开URL地址的几种方法小结
May 16 PHP
PHP中数组的三种排序方法分享
May 07 PHP
php常用ODBC函数集(详细)
Jun 24 PHP
PHP 安全检测代码片段(分享)
Jul 05 PHP
基于PHP中的常用函数回顾
Jul 11 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
May 04 PHP
Laravel5.1自定义500错误页面示例
Oct 09 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
Apr 03 PHP
php 浮点数比较方法详解
May 05 PHP
PHP+redis实现的悲观锁机制示例
Jun 12 PHP
python进程与线程小结实例分析
Nov 11 PHP
php设计模式之策略模式应用案例详解
Jun 17 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下使用strpos需要注意 === 运算符
2010/07/17 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
javascript数据类型详解
2017/02/07 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
python在windows下实现备份程序实例
2014/07/04 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
结构和类有什么异同
2012/07/16 面试题
新媒传信软件测试面试题
2013/02/24 面试题
院领导写的就业推荐信
2014/03/09 职场文书
导游个人求职信范文
2014/03/23 职场文书
如何写早恋检讨书
2014/09/10 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书