最近在做php第二阶段的项目，需要用到头像上传的功能

我们要完成头像上传功能，一共要写两个php页面，第一个页面我们叫做touxiang.php，第二个页面我们叫做upload.php

1.touxiang.php

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

 <script src="bootstrap-3.3.7-dist/js/jquery-1.11.2.min.js"></script>

 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

 <style type="text/css">

 #yl{ width:200px; height:200px; background-image:url(img/avatar.png); background-size:200px 200px;}

 #file{ width:200px; height:200px; float:left; opacity:0;}

 .modal-content{ width:500px;}

 .kk{ margin-left:130px;}

 </style>

 </head>

 <body>

 <!-- 按钮触发模态框 -->

 <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

     上传头像

 </button>

 <!-- 模态框（Modal） -->

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

     <div class="modal-dialog">

         <div class="modal-content">

             <div class="modal-header">

                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">

                     &times;

                 </button>

                 <h4 class="modal-title" id="myModalLabel">

                     上传头像

                 </h4>

             </div>

             <div class="modal-body">

                 <form id="sc" action="upload.php" method="post" enctype="multipart/form-data" target="shangchuan">

     <input type="hidden" name="tp" value="" id="tp" />

     <div id="yl" class="kk">

         <input type="file" name="file" id="file" onchange="document.getElementById('sc').submit()" />

     </div>

 </form>

 <iframe style="display:none" name="shangchuan" id="shangchuan">

 </iframe>

             </div>

             <div class="modal-footer">

                 <button type="button" class="btn btn-default" data-dismiss="modal">关闭

                 </button>

                 <!--<button type="button" class="btn btn-primary">

                     提交更改

                 </button>-->

             </div>

         </div><!-- /.modal-content -->

     </div><!-- /.modal -->

 </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>

在这个页面我们需要引入一个模态框和bootstrap.min.css，jquery-1.11.2.min.js，bootstrap.min.js三个文件

2.upload.php

 <?php

 if($_FILES["file"]["error"])

 {

     echo $_FILES["file"]["error"];

 }

 else

 {

     if(($_FILES["file"]["type"]=="image/jpeg" || $_FILES["file"]["type"]=="image/png")&& $_FILES["file"]["size"]<1024000000)

     {

         $fname = "./img/".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实现头像预览上传功能的更多相关文章

  1. JS代码实用代码实例（输入框监听，点击显示点击其他地方消失,文件本地预览上传)

    前段时间写前端,遇到一些模块非常有用,总结以备后用 一.input框字数监听 <!DOCTYPE html> <html lang="en"> <he ...

  2. 【项目相关】MVC中使用WebUploader进行图片预览上传以及编辑

    项目中需要用到多图片上传功能,于是在百度搜了一下,首先使用了kissy uploader,是由阿里前端工程师们发起创建的一个开源 JS 框架中的一个上传组件...但,后面问题出现了. 在对添加的信息进 ...

  3. bootstrap+fileinput插件实现可预览上传照片功能

    实际项目中运用: 功能:实现上传图片,更改上传图片,移除图片的功能 <!DOCTYPE html> <html> <head> <meta charset=& ...

  4. 对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)

    前言 本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文 使用方式同 ...

  5. H5实现多图片预览上传，可点击可拖拽控件介绍

    版权声明:欢迎转载,请注明出处:http://blog.csdn.net/weixin_36380516 在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到 ...

  6. jquery.uploadView 实现图片预览上传

    图片上传,网上有好多版本,今天也要做一个查了好多最终找到了一个uploadview 进行了一下修改 来看代码 @{ Layout = null; } <!DOCTYPE html> < ...

  7. MUI 单个图片上传预览（拍照+系统相册）：先选择->预览->上传提交

    1 html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  8. js获取base64格式图片预览上传并用php保存到本地服务器指定文件夹

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. PHP jQuery实现上传图片时预览图片的功能实例

    在PHP项目开发中,有时候经常需要做添加图片的功能.添加图片时,一般需要即时预览上传的图片.下面这个例子就是简单的预览上传图片功能,代码如下(分两部分): 1.HTML代码: <div clas ...

随机推荐

  1. Spark集群之Spark history server额外配置

     Note: driver在SparkContext使用stop()方法后才将完整的信息提交到指定的目录,如果不使用stop()方法,即使在指定目录中产生该应用程序的目录,history server ...

  2. 全网最详细的Windows系统里Oracle 11g R2 Database（64bit）的完全卸载（图文详解）

    不多说,直接上干货! 前期博客 全网最详细的Windows系统里Oracle 11g R2 Database(64bit)的下载与安装(图文详解) 若你不想用了,则可安全卸载. 完全卸载Oracle ...

  3. Python基础之好玩的字符串格式化之类C风格

    今天白月黑羽和大家说说字符串格式化,在python3中,字符串格式化主要有2种方法,今天先和大家介绍类C风格的printf. printf 风格 这种方式 和 传统的C语言printf函数使用一样的格 ...

  4. pyenv docter检测出configure: error: OpenSSL is not installed.解决方案

    1 在安装相应版本的python时,前声明 CFLAGS=-I/usr/include/openssl \ LDFLAGS=-L/usr/lib64 \ pyenv install -v 3.5.1

  5. 如何让你的网站用上免费的HTTPS

    因为之前网站上被注入了广告,再百般尝试之后最后还是使用了HTTPS解决了. 在实现HTTPS的时候最关键的就是证书. 证书的质量觉得了你被多少浏览器所信任. 证书的价格也就蹭蹭蹭往上涨了. 这里推荐一 ...

  6. 前端组件化Polymer入门教程(6)——监听属性值变化

    监听属性值变化 如果需要监听属性值变化可以通过给observer赋值一个回调函数. <say-Hello></say-Hello> <dom-module id=&quo ...

  7. Linux-(ping,traceroute,ss)

    ping命令 1.命令格式: ping [参数] [主机名或IP地址] 2.命令功能: ping命令用于:确定网络和各外部主机的状态:跟踪和隔离硬件和软件问题:测试.评估和管理网络.如果主机正在运行并 ...

  8. docker空间管理之清理磁盘占用

    1.docker部署后修改数据存放目录,默认存放到/var/lib/docker下面,修改到一个大的空间目录下面.参考我的另外一篇博客:https://www.cnblogs.com/cuishuai ...

  9. zoj 1151 Word Reversal(字符串操作模拟)

    题目连接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1151 题目描述: For each list of words ...

  10. Silverlight 查询DataGrid 中匹配项 ,后台改变选中行颜色

    需求:根据关键字(参会人号码或名称)查找参会人,在datagird 中高亮显示 界面:我在界面上增加了一个文本框和按钮,进行查找操作 操作说明: 根据关键字进行搜索:输入关键字 点击查找,如果找到 以 ...