最近在做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. Scala使用Akka模拟RPC机制代码

    上代码:  另一个版本(自己加注释):http://www.cnblogs.com/DreamDrive/p/6740440.html RemoteMessage.scala trait Remote ...

  2. Entity framework 预热

    Entity framework  预热 对于在应用程序中定义的每个DbContext类型,在首次使用时,Entity Framework都会根据数据库中的信息在内存生成一个映射视图(mapping ...

  3. flex布局下， 内容改变 不重新渲染问题

    当使用flex布局时,flex内元素包含的内容改变时,浏览器不会进行重新渲染, 答案引用 http://stackoverflow.com/questions/23474191/flexbox-hei ...

  4. MyBatis 注解配置

    Employee package com.example.demo.domain; import java.io.Serializable; public class Employee impleme ...

  5. 利用cygwin创建windows下的crontab定时任务

    要求 必备知识 熟悉基本编程环境搭建. 运行环境 windows 7(64位); Cygwin-1.7.35 下载地址 环境下载 什么是Cygwin Cygwin是一个在windows平台上运行的类U ...

  6. SSM整合——spring4.*配置案例

    导入spring4.* 相关的jar包和依赖包即可 1.web.xml <?xml version="1.0" encoding="UTF-8"?> ...

  7. 【IT笔试面试题整理】二叉搜索树转换为双向链表

    [试题描述] 将二叉搜索树转换为双向链表 对于二叉搜索树,可以将其转换为双向链表,其中,节点的左子树指针在链表中指向前一个节点,右子树指针在链表中指向后一个节点. 思路一: 采用递归思想,对于二叉搜索 ...

  8. vuex数据管理－数据模块化

    对于vue这类mvvm框架来说,其核心就是组件与数据,因此做好相应的数据管理极为重要.这里分享下vuex数据模块化管理的方法,有利于搭建便于维护.协作的vue项目. vuex管理基本方法和使用 模块化 ...

  9. git使用总结（包含git commit message 和 changelog 工具的介绍）

    [git的配置] 1.配置用户名和邮箱: 分为全局配置和局部配置 --system 系统配置  --global 全局配置    --local 局部配置 Git读取时:优先从local>glo ...

  10. Eclipse MAT：浅堆 vs 保留堆

    来自:唐尤华 https://dzone.com/articles/eclipse-mat-shallow-heap-retained-heap 有没有想要搞清楚浅堆(Shallow Heap)和保留 ...