最近在做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. SpaceSyntax【空间句法】之DepthMapX学习：第三篇 软件介绍与一般分析流程图

    上篇讲啥来着?好像讲了数据的输入以及一些核心的概念.这篇讲软件长什么样,做那几种分析的步骤如何. 博客园/B站/知乎/CSDN @秋意正寒(我觉得这一篇肯定很多盗图的,那么我在版头加个本篇地址吧)ht ...

  2. Ruby：多线程队列(Queue)下载博客文章到本地

    Ruby:多线程下载博客文章到本地的完整代码 #encoding:utf-8 require 'net/http' require 'thread' require 'open-uri' requir ...

  3. 使用binlog2sql针对mysql进行数据恢复

    MySQL闪回原理与实战 DBA或开发人员,有时会误删或者误更新数据,如果是线上环境并且影响较大,就需要能快速回滚.传统恢复方法是利用备份重搭实例,再应用去除错误sql后的binlog来恢复数据.此法 ...

  4. Google Chrome Native Messaging开发实录（一）背景介绍

    最近接手了一个针对Google Chrome的需求,最终是使用Native Messaging来实现的.通过这个连载,将把本次开发从方案选定到编码的全部过程进行完整的回顾,并记录开发过程中踩过的各种坑 ...

  5. nginx配置文件nginx.conf 不包括server节点

    整理的一个nginx.conf的配置,不包括server节点介绍 原文请查看,Nginx配置文件(nginx.conf)配置详解 # For more information on configura ...

  6. C++关于sort和priority_queue的运算符重载

    C++中的sort函数默认是将元素升序排列的,而priority_queue默认是将元素降序排列的(默认实现的是大顶堆). 自定义运算符用的比较多,以下2种对sort和priority_queue运算 ...

  7. PTA (Advanced Level) 1008 Elevator

    Elevator The highest building in our city has only one elevator. A request list is made up with Npos ...

  8. Qt编写自定义控件12-进度仪表盘

    前言 进度仪表盘主要应用场景是标识一个任务进度完成的状况等,可以自由的设置范围值和当前值,为了美观还提供了四种指示器(圆形指示器/指针指示器/圆角指针指示器/三角形指示器),各种颜色都可以设置,其中的 ...

  9. ActiveMQ与Spring整合-MessageListener

    消费者,使用监听的实现方式. 1. pom.xml 2. 生产者 package org.ygy.mq.lesson04; import javax.jms.JMSException; import  ...

  10. PBN飞越转弯Flyover衔接TF、CF航段保护区组图

    PBN飞越转弯Flyover衔接TF.CF航段虽不常用,但也很重要,与旁切转弯有一定的相似性. 飞越转弯 flyover-TF/CF 叠加图: 飞越转弯 flyover-TF/CF 分解图: