php头像上传预览实例代码-6ren

php头像上传预览实例代码

转载作者：qq735679552 更新时间：2022-09-28 22:32:09

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章php头像上传预览实例代码由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

说道上传图片，大家并不陌生，不过，在以后开发的项目中，可能并不会让你使用提交刷新页面式的上传图片，比如上传头像，按照常理，肯定是在相册选择照片之后，确认上传，而肯定不会通过form表单，点击submit刷新式上传。我为大家介绍两种异步非刷新式上传图片+图片预览：第一种，通过现成的uploadfy插件进行上传，网上好多实例.

不过我重点为大家介绍的是第二种，通过Ajax上传图片。因为使用uploadfy插件需要设备支持swf格式的Flash，所以对大多数手机来说，第一种方式就没办法使用了。首先，我先跟大家说一下上传原理：通过js控制file文本域，当选择照片之后，通过Ajax异步提交form表单，然后将图片的位置作为返回值，使用js把img的src属性设置为返回值.

上传头像区域:

代码:

    php" id="highlighter_261571"> 
    
    ? 
   
         <!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= 
         "external nofollow" 
         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>

上传的处理页:

 
    ? 
   
         <?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>" 
         ; 
        
         } 
        
         } 
        
         }

原理:

通过form表单的enctype="multipart/form-data"属性将文件临时放到wamp文件夹中的tmp目录下，再通过后台php程序将文件保存在体统中.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：http://www.cnblogs.com/xuan584521/p/6790670.html?utm_source=tuicool&utm_medium=referral 。

最后此篇关于php头像上传预览实例代码的文章就讲到这里了,如果你想了解更多关于php头像上传预览实例代码的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐： Fluent Mybatis,原生Mybatis,Mybatis Plus三者功能对比

文章推荐：一篇文章带你了解java数据库连接

文章推荐： Java服务器宕机的解决方法论

python - 在用户定义类的实例上启用列表(实例)或元组(实例)
有没有一种方法可以使用标准类型构造函数(例如 int、set、dict、list、tuple 等)以用户定义的方式将用户定义类的实例强制转换为其中一种类型？例如 class Example:
grails - grails对象引用了未保存的 transient 实例-在刷新之前保存 transient 实例
我知道这个问题在Stackoverflow中有很多问题，但是即使有很多答案，这些答案也帮不了我什么，也没有找到答案。在我的WebAPP中，它可以正常工作，但是当我将其转换为API时，它失败了(主题标
java - 我新建了一个 Integer 实例，但它给了我一个 Long 实例
这个问题已经有答案了: Why does the ternary operator unexpectedly cast integers? (3 个回答) 已关闭 9 年前。最近遇到一个Java的陷
ios - 必须先配置默认 FirebaseApp 实例，然后才能初始化 defaultFirebaseApp 实例
我尝试使用 FirebaseApp.configure() 配置 Firebase，但遇到以下崩溃: *** Terminating app due to uncaught exception 'c
c# - 对象引用未保存的 transient 实例在刷新之前保存 transient 实例
我有一个自连接员工实体类，其中包含与其自身相关的 id、name 和 ref 列。我想创建它的新实例并将其保存到数据库。首先我创建了一个 Employee 类的实例并将其命名为 manager。然后
java - 对象是未保存的 transient 实例 - 在合并之前保存 transient 实例
我有一个用于添加新公寓的表单，在该表单中我有一个下拉列表，用户可以在其中选择负责的人员。显然，当您从下拉列表中选择并尝试保存公寓时，我的应用程序认为该人已被修改。它给了我下面的错误，指示我应该首先保
salesforce - 检索 salesforce 实例 URL 而不是 Visualforce 实例
从 Visualforce 页面，我需要检索我们组织的 salesforce 实例的 URL，而不是 Visual Force URL。例如我需要https://cs1.salesforce.com
hibernate - TransientObjectException - 对象引用未保存的 transient 实例 - 在刷新之前保存 transient 实例
我遇到了一些可能的问题答案，但这是关于从 Hibernate 3.4.0GA 升级到 Hibernate 4.1.8 的问题。所以这曾经在以前的版本下工作，我已经四处搜索了为什么它在这个新版本中出现了
hibernate - 交叉依赖问题:对象引用未保存的 transient 实例，在刷新之前保存 transient 实例
似乎一遍又一遍地问这个问题，我仍然找不到解决我问题的答案。我在下面有一个域模型。每个新创建或更新的“安全用户”都需要我确保其具有配置文件，如果没有，则创建一个新的配置文件并分配给它。配置文件的要求相
java - JPA 对象引用未保存的 transient 实例 - 在刷新之前保存 transient 实例
我很难调试为什么 JPA 不级联我的 @ManyToMany 关系。我发现的所有答案都与缺少级联语句有关。但我确实拥有它们并且仍然得到: Caused by: org.hibernate.Transi
android - firebase 实例 ID 与 android 实例 ID
Play 服务 API 表明有一个叫做 Instance ID 的东西但是，在 Android Studio 中包含以下内容后，我无法导入 InstanceID 类 compile "com.goo
hibernate - 对象引用未保存的 transient 实例 - 在刷新 Hibernate 之前保存 transient 实例
我正在使用 Seam 框架。我有 2 个实体: 请求.java @Entity @Table(name = "SRV_REQUEST") public class Request { private
haskell - 如何构造带约束的 Applicative 实例(类似于使用 ContT 构造 Monad 实例)
This question处理构建一个适当的Monad来自单子(monad)的实例，但仅在某些约束下 - 例如Set .诀窍是将其包装成 ContT ，它将约束推迟到包装/展开其值。现在我想对 Ap
java - 对象引用未保存的 transient 实例 - 在使用 hibernate 空间刷新之前保存 transient 实例
我正在尝试执行此查询: StringBuffer sb = new StringBuffer(); sb.append("select p from PointsEntity p " + "where
java - 单个 MySQL 实例 + Hibernate Config 与多个 MySQL 实例
我试图了解是否可以更改我的 hibernate 配置并使用单个 MySQL 实例(而不是我当前拥有的多个 MySQL 实例): 我有一个使用 hibernate 的 Java 应用程序，与 2 个模式
android - 选项卡更改时保留以前加载的 fragment 实例，而不是在 android 中创建新 fragment 实例
我有一个选项卡滑动布局，其中包括四个选项卡，每个选项卡都有自己的布局和 fragment ，在我的主要 Activity 布局中，viewpager 参与更改选项卡。特定 View (选项卡)在应用程
mysql - 无法远程连接到在 EC2 实例(非 RDS)上运行的 MySQL 实例
我看到很多帖子声称他们正在运行 MySql 的 RDS 实例，但无法连接到该实例，但我没有运行 RDS。我使用 EC2 实例来托管我的 WordPress 博客，该博客是使用 Web 平台安装程序安
amazon-web-services - 从我的 ec2 实例 ssh 到我的 ec2 实例
因为我在我的 ec-2 实例上的 python 虚拟环境中运行应用程序( Airflow )，并且我想在同一个 ec2 实例上的默认 python 环境中运行命令，所以我认为 ssh 到我自己的实例更
java - 对象引用未保存的 transient 实例 - 在刷新 hibernate JPA 之前保存 transient 实例
这个问题已经有答案了: How to fix the Hibernate "object references an unsaved transient instance - save the tra
vue.js - vue 实例 (app1) 调用另一个 vue 实例 (app2) 的最佳方式
例子: run APP1 .. ... run APP1 ... run APP2 如何在 APP2 中对 Vue 说我需要调用 APP1？

qq735679552

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

php头像上传预览实例代码