个人中心
gpt4 book ai didi

php头像上传预览实例代码

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 27 4
gpt4 key购买 nike

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

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

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

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

上传头像区域:

代码:

php" id="highlighter_261571">
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!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>

上传的处理页:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?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的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

27 4 0
文章推荐： Fluent Mybatis,原生Mybatis,Mybatis Plus三者功能对比
文章推荐： 一篇文章带你了解java数据库连接
文章推荐： Java服务器宕机的解决方法论
文章推荐： php usort 使用用户自定义的比较函数对二维数组中的值进行排序
qq735679552
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com