php头像上传预览实例代码
说道上传图片，大家并不陌生，不过，在以后开发的项目中，可能并不会让你使用提交刷新页面式的上传图片，比如上传头像，按照常理，肯定是在相册选择照片之后，确认上传，而肯定不会通过form表单，点击submit刷新式上传。我为大家介绍两种异步非刷新式上传图片+图片预览：第一种，通过现成的uploadfy插件进行上传，网上好多实例。
不过我重点为大家介绍的是第二种，通过Ajax上传图片。因为使用uploadfy插件需要设备支持swf格式的Flash，所以对大多数手机来说，第一种方式就没办法使用了。首先，我先跟大家说一下上传原理：通过js控制file文本域，当选择照片之后，通过Ajax异步提交form表单，然后将图片的位置作为返回值，使用js把img的src属性设置为返回值。
上传头像区域：
代码：
<!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">
×
</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程序将文件保存在体统中。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
一个网站,其实说白了就是某几个特定功能的组合,而更换用户头像就在这些功能之中.今天就来做个测试,针对不同的用户,实现头像上传功能. -------------------------------------------------------------------------------- 成品图 思路 •针对不同的用户上传头像,我们要为每一个已登录的用户创建一个文件夹,文件夹的名称以当前用户的用户名为准. •用户上传成功后,跳转到用户登录成功后的页面,并刷新用户头像. 登陆页面 表单制作
-
php实现文件上传及头像预览功能
php文件上传原理是通过form表单的enctype="multipart/form-data"属性将文件临时放到wamp文件夹中的tmp目录下,再通过后台php程序将文件保存在体统中. html代码: <form action="shangchuan.php" method="post" enctype="multipart/form-data"> <input type="file"
-
php实现头像上传预览功能
本文实例为大家分享了php实现头像上传预览功能的具体代码,供大家参考,具体内容如下 主页面1.php <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>上传头像</title> <style type="text/css"> *{ font-fa
-
php+js iframe实现上传头像界面无跳转
上传头像,界面无跳转的方式很多,我用的是加个iframe那种.下面直接上代码. html: 复制代码 代码如下: //route 为后端接口 //upload/avatar 为上传的头像的保存地址 //imgurl=/upload/avatar/<?=$uid?> 这里最后的<?=$uid?>是为了后面用js实现即时显示最新的更换后的头像用的,参照下面的js部分的代码 //头像保存名称为uid.type,如1.jpg,2.png等 //$user['avatar'] 用户如果上传过
-
php视频拍照上传头像功能实现代码分享
如果要在php中实现视频拍照我们需要借助于flash插件了,由flash拍出的确照片我们再通过php的$GLOBALS ['HTTP_RAW_POST_DATA']接受数据,然后保存成图片就可以了,下面我来介绍一下. 使用的是$GLOBALS ['HTTP_RAW_POST_DATA'],这个系统函数跟post很相似,但是$GLOBALS ['HTTP_RAW_POST_DATA']支持的数据格式更丰富些. 设计流程: $GLOBALS ['HTTP_RAW_POST_DATA']传递照片数据流
-
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
昨天花了点时间整合了一下头像插件 东拼西凑的成果 先来看下效果 1.先使用ajaxfileupload插件做异步上传.这个地方我本来想做个上传进度的效果,但技术有限失败了.上传按钮我还做了一个文件大小的限制,但是由于浏览器兼容性的问题,不完美在IE6--IE9之间还有很多问题需要解决 getFileSize函数是用于判断文件大小的函数 复制代码 代码如下: function getFileSize(fileName) { var byteSize = 0;
-
php头像上传预览实例代码
说道上传图片,大家并不陌生,不过,在以后开发的项目中,可能并不会让你使用提交刷新页面式的上传图片,比如上传头像,按照常理,肯定是在相册选择照片之后,确认上传,而肯定不会通过form表单,点击submit刷新式上传.我为大家介绍两种异步非刷新式上传图片+图片预览:第一种,通过现成的uploadfy插件进行上传,网上好多实例. 不过我重点为大家介绍的是第二种,通过Ajax上传图片.因为使用uploadfy插件需要设备支持swf格式的Flash,所以对大多数手机来说,第一种方式就没办法使用了.首先,我
-
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其能够显示裁剪后的区域 (3)显示要裁剪区域的坐标 其次,该如何引用该插件呢? 那就具体看一下吧! 第一步:先将样式和文件包引入(根据你自己的位置引入) <!--引入imgareaselect的css样式--> <link rel="stylesheet" type=&qu
-
ie8本地图片上传预览示例代码
复制代码 代码如下: imgpath= getRealPath(fileId): document.getElementById("divSBTP").style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ imgpath + "\")";//使用滤镜效果 func
-
js利用FileReader实现图片转base64格式并上传预览头像
目录 页面布局: 思路分析: 代码: 修改用户头像,一般都会需要把图片转成base64格式,所以我们需要学会怎么利用FileReader转换 页面布局: <template> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>更换头像</span> </div> <div>
-
JavaScript代码实现txt文件的上传预览功能
今天做项目刚好碰到这个记录一下.因为是简单的txt文件,只涉及文本,如果需要涉及图片预览就需要使用papaparse和jschardet,此处不多叙述. 表单按钮使用js的onchange="uploadfile()" 事件,function函数代码如下所示: //此处为txt文件上传预览的js代码 function uploadfile(){ var file=$("#txt")[0].files[0]; //判断上传文件是不是txt格式,判断后缀是不是.txt
-
jQuery实现图片上传预览效果功能完整实例【测试可用】
本文实例讲述了jQuery实现图片上传预览效果功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net jquery图片上传预览效果</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.j
-
基于JQuery实现图片上传预览与删除操作
本文实例为大家分享了JQuery实现图片上传预览与删除的具体代码,经测试目前满足谷歌.火狐.360.IE6,7,8,9,10,11等浏览器,供大家参考,具体内容如下 1. preview.2.0.html <!DOCTYPE html> <html> <head> <title>上传图片预览</title> <meta http-equiv="content-type" content="text/html;
-
BootStrap Fileinput上传插件使用实例代码
0.效果图 1.引入js.css(建议css放在html头部,js加载在html底部) <link href="~/Content/fileinput.min.css" rel="external nofollow" rel="stylesheet" /> <script src="~/scripts/jquery-1.10.2.min.js"></script> <script sr
-
vue实现图片上传预览功能
本文实例为大家分享了vue实现图片上传预览的具体代码,供大家参考,具体内容如下 效果图 html结构 <ul class="gallery-window-map" style="flex-wrap:wrap;"> <!--点击上传按钮--> <li class="house-pic-item" v-if="!(!item.isNew&&editBtnType[index])" @c