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 相关文章推荐
动易数据转成dedecms的php程序
Apr 07 PHP
php 字符串函数收集
Mar 29 PHP
PHP常用正则表达式集锦
Aug 17 PHP
PHP中变量引用与变量销毁机制分析
Nov 15 PHP
PHP中iconv函数转码时截断字符问题的解决方法
Jan 21 PHP
php判断数组中是否存在指定键(key)的方法
Mar 17 PHP
对PHP依赖注入的理解实例分析
Oct 09 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
Jun 14 PHP
php ajax数据传输和响应方法
Aug 21 PHP
如何优雅的使用 laravel 的 validator验证方法
Nov 11 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
Aug 14 PHP
mysqli扩展无法在PHP7下升级问题的解决
Sep 10 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获取某个目录大小的代码
2008/09/10 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
一些Solaris面试题
2013/03/22 面试题
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
幼儿园教育教学反思
2014/01/31 职场文书
12月红领巾广播稿
2014/02/13 职场文书
计划生育个人总结
2015/03/02 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang