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 相关文章推荐
ThinkPHP php 框架学习笔记
Oct 30 PHP
php+javascript的日历控件
Nov 19 PHP
用PHP+MySQL搭建聊天室功能实例代码
Aug 20 PHP
windwos下使用php连接oracle数据库的过程分享
May 26 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
Jul 01 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
Oct 11 PHP
php 函数使用可变数量的参数方法
May 02 PHP
php中时间函数date及常用的时间计算
May 12 PHP
php 二维数组快速排序算法的实现代码
Oct 17 PHP
php 字符串中是否包含指定字符串的多种方法
Apr 12 PHP
PHP+Ajax实现的检测用户名功能简单示例
Feb 12 PHP
laravel 如何实现引入自己的函数或类库
Oct 15 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实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
JS中Safari浏览器中的Date
2017/07/17 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
Python使用剪切板的方法
2017/06/06 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
Python龙贝格法求积分实例
2020/02/29 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
招商经理岗位职责
2013/11/16 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery