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 相关文章推荐
打造计数器DIY三步曲(下)
Oct 09 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
Apr 07 PHP
ThinkPHP 防止表单重复提交的方法
Aug 08 PHP
PHP数据集构建JSON格式及新数组的方法
Nov 07 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
Mar 26 PHP
PHP Global变量定义当前页面的全局变量实现探讨
Jun 05 PHP
php中出现空白页的原因及解决方法汇总
Jul 08 PHP
php实现四舍五入的方法小结
Mar 03 PHP
PHP排序算法类实例
Jun 17 PHP
PHP getallheaders无法获取自定义头(headers)的问题
Mar 23 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
Sep 21 PHP
laravel实现上传图片的两种方式小结
Oct 12 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获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
php模拟post提交数据的方法
2015/02/12 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
基于PHP制作验证码
2016/10/12 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
基于jQuery的自动完成插件
2011/02/03 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
python列表生成器迭代器实例解析
2019/12/19 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
同程旅游英文网站:LY.com
2018/11/13 全球购物
同学聚会老师邀请函
2014/01/28 职场文书
军人违纪检讨书
2014/02/04 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
圣诞晚会主持词
2015/07/01 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
Selenium浏览器自动化如何上传文件
2022/04/06 Python