php部分--头像上传预览
前台页面显示
<style type="text/css">
#yl{ width:200px; height:300px; background-image:url(img/11.png); background-size:200px 300px;}
#file{ width:200px; height:300px; float:left; opacity:0;} /*设置透明，当点击图像时，即点击了上传文件文本框*/
</style>
</head> <body> <form id="sc" action="chuli.php" method="post" enctype="multipart/form-data" target="shangchuan"> <input type="hidden" name="tp" value="" id="tp" /> <div id="yl">
<input type="file" name="file" id="file" onchange="document.getElementById('sc').submit()" />
</div> </form> <iframe style="display:none" name="shangchuan" id="shangchuan">
</iframe> </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"]<1024000)
{
$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部分--头像上传预览的更多相关文章
- jQuery插件ImgAreaSelect 实例讲解一（头像上传预览和裁剪功能）
上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...
- php头像上传预览
php头像上传带预览: 说道上传图片,大家并不陌生,不过,在以后开发的项目中,可能并不会让你使用提交刷新页面式的上传图片,比如上传头像,按照常理,肯定是在相册选择照片之后,确认上传,而肯定不会通过fo ...
- input file图片上传预览
两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...
- input file图片上传预览效果
两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...
- [前端 4] 使用Js实现图片上传预览
导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...
- 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转
文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...
- signup图片上传预览经常总结
html <html> <head> <meta charset="utf-8" /> <meta http-equiv="X- ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- PHP WAMP 文件上传 及 简单的上传预览
...... 使用特殊的表单类型file, 主(上传)页面: <form action="chuli.php" method="post" enctype ...
随机推荐
- hdu 2674(余数性质)
N!Again Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Sub ...
- Codeforces 891C Envy（MST + 并查集的撤销）
题目链接 Envy 题意 给出一个连通的无向图和若干询问.每个询问为一个边集.求是否存在某一棵原图的最小生成树包含了这个边集. 考虑$kruskal$的整个过程, 当前面$k$条边已经完成操作的时 ...
- 某考试 T2 Seg
Seg [问题描述]数轴上有n条线段,第i条线段的左端点是a[i],右端点是b[i].Bob发现1~2n共2n个整数点,每个点都是某条线段的端点.这些线段有如下两类特点:1 x y,表示第x条线段和第 ...
- 通信API、使用Web Workers处理线程
1.跨文档消息传输 要想接受从其他的窗口那里发过来的消息,就必须对窗口对象的message事件进行监视. w ...
- Xocde 自动注释插件
github 地址 https://github.com/onevcat/VVDocumenter-Xcode 可以对xcode方法进行类似java那样的自动注释 源码下载下后编译运行一次 xo ...
- ios内存管理笔记（二）
1)实现部分: 复制代码 @synthesize window=_window; @synthesize viewController=_viewController; 通常看到的都没有包含=部分,@ ...
- 【spring cloud】子模块启动报错com.netflix.hystrix.contrib.javanica.aop.aspectj.HystrixCommandAspect
spring cloud子模块启动报错 Caused by: java.lang.ClassNotFoundException: com.netflix.hystrix.contrib.javanic ...
- 2016.8.19 在dialog上增加一个button出现错误：failed to execute setAttribute on Element...
目标:想要在dialog上多加一个button. 语法来自: http://api.jqueryui.com/dialog/#option-buttons 可见新增在dialog上的button要 ...
- AWK 思维导图
完整的AWK思维导图 文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing
- csdn开源夏令营-ospaf中期报告
1.背景 随着将中期的代码托管到CSDN的平台上,ospaf(开源项目成熟度分析工具)已经有了小小的雏形.当然还远远不够. 首先还是要感谢这次活动组织方CSDN,感觉挺有G ...