最近在做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. centos7 初始化脚本

    #!/bin/bash # 时间: 2018-11-21 # 作者: HuYuan # 描述: CentOS 7 初始化脚本 # 加载配置文件 if [ -n "${1}" ];t ...

  2. Xamarin中 ios 修改Assets.xcassets 文件后 无法调试和编译

    根本问题是因为 vs项目里面 没有包含 如果提示找不到对应png 请检查 iOS 项目卸载后 编辑 并找到对应文件检查 <ImageAsset Include="Assets.xcas ...

  3. Java代码操作HDFS测试类

    1.Java代码操作HDFS需要用到Jar包和Java类 Jar包: hadoop-common-2.6.0.jar和hadoop-hdfs-2.6.0.jar Java类: java.net.URL ...

  4. Webflux快速入门

    SpringWebflux是SpringFramework5.0添加的新功能,WebFlux本身追随当下最火的Reactive Programming而诞生的框架,那么本篇就来简述一下这个框架到底是做 ...

  5. 公共技术点（Android 动画基础）

    转载地址:http://p.codekk.com/blogs/detail/559623d8d6459ae793499787 一 传统 View 动画(Tween/Frame) 1.1 Tween 动 ...

  6. Toast优化，解决频繁点击多次出现

    日常用到Taost的机会很多,用就大家都会用,但是直接使用时,频繁点击Toast就会频繁出现,点击多少次就出现多少次,如果你不在页面的生命周期相应位置cancel掉Toast的话,即使退出了页面也是会 ...

  7. JSP -- 从甲骨文开始

    1.Oracle10gForVistaX64下载地址:http://download.oracle.com/otn/nt/oracle10g/10204/10204_vista_w2k8_x64_pr ...

  8. vue父组件传参给子组件

    其实组件之间传参有很多种方法: 1.通过本地存储 2.使用vuex状态管理 今天记录一下第三种方法 1.首页我们先创建一个项目(创建项目自行百度) 2.打开项目,在components文件夹下新建一个 ...

  9. C#数据仓储类

    https://ninesky.codeplex.com/SourceControl/latest /*============================== 版本:v0.1 创建:2016.2 ...

  10. Tomcat学习总结（13）—— Tomcat常用参数配置说明

    1.修改端口号 Tomcat端口配置在server.xml文件的Connector标签中,默认为8080,可根据实际情况修改. 修改端口号 2.解决URL中文参数乱码 在server.xml文件的Co ...