php文件上传及头像预览
php文件上传原理是通过form表单的enctype="multipart/form-data"属性将文件临时放到wamp文件夹中的tmp目录下,再通过后台php
程序将文件保存在体统中。
html代码:
<form action="shangchuan.php" method="post" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="submit" value="上传" />
</form>
后台处理界面(shangchuan.php):
有以下几点需要注意:
1.控制上传文件的类型
2.控制上传文件的大小
3.防止文件名重复
修改保存的文件名
用户名+时间戳+随机数+文件名
流水号
使用文件夹要提前建好路径。
4.保存文件
//判断文件上传是否出错
if($_FILES["file"]["error"])
{
echo $_FILES["file"]["error"];
}
else
{
//控制上传文件的类型,大小
if(($_FILES["file"]["type"]=="image/jpeg" || $_FILES["file"]["type"]=="image/png") && $_FILES["file"]["size"]<1024000)
{
//找到文件存放的位置
$filename = "./file/".date("YmdHis").$_FILES["file"]["name"]; //转换编码格式
$filename = iconv("UTF-8","gb2312",$filename); //判断文件是否存在
if(file_exists($filename))
{
echo "该文件已存在!";
}
else
{
//保存文件
move_uploaded_file($_FILES["file"]["tmp_name"],$filename);
}
}
else
{
echo "文件类型不正确!";
}
}
点击上传后文件就保存在系统的指定路径下。
保存后按照指定方法重命名文件名:
头像上传预览
原理:在html界面做一个头像大小的div,设置上传头像的背景,在div里面做一个上传文件的input,透明度设置为0.
这样,点击这个div就可以跟上传的效果相同。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<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处理界面(chuli.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"]<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文件上传及头像预览的更多相关文章
- dwz+jquery+fileupload+springmvc实现文件上传 及图片预览
1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarD ...
- HTML5文件上传前本地预览
HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型 ...
- javascript实现文件上传之前的预览功能
1.首先要给上传文件表单控件和图片控件设置name属性 <div class="form-group"> <label fo ...
- jsp+springmvc实现文件上传、图片上传和及时预览图片
1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...
- [.ashx檔?泛型处理例程?]基础入门#2....FileUpload上传前,预览图片(两种作法--ashx与JavaScript)
原文出處 http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...
- Ajax上传图片以及上传之前先预览
手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果 ...
- java多图片上传--前端实现预览--图片压缩 、图片缩放,区域裁剪,水印,旋转,保持比例。
java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...
- web 图片上传实现本地预览
在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...
- 图片上传前的预览(PHP)
1.先创建一个file表单域,我们需要用它来浏览本地文件.<form name="form1" id="form1" method="post& ...
随机推荐
- 学习使用简单的php
配置文件在:/etc/php5/$中,不同的模式含有自己的php.ini配置文件.php可以运行于多种模式:cgi.fastcgi.cli.web模块模式等4种: 我现在使用的模式是cli模式,这里进 ...
- FPGA 设计怎样进行面积优化(逻辑资源占用量优化)
FPGA面积优化 1 对于速度要求不是非常高的情况下,我们能够把流水线设计成迭代的形式,从而反复利用FPGA功能同样的资源. 2 对于控制逻辑小于共享逻辑时,控制逻辑资源能够用来复用,比如FIR滤波器 ...
- NCache实现Oracle数据与分布式缓存数据同步的3个步骤
多层次结构的应用程序是目前发展的趋势,这种程序都需要庞大的数据库支持.而数据传输的能力直接影响程序性能,成为程序可扩展性的瓶颈.因此很多开发者开始在程序中使用内存分布式缓存来提高程序性能. 同时,内存 ...
- ubuntu下使用openocd+jlink进行STM32开发调试
安装openocd就不用多说了,使用 apt-get install openocd 这个命令就可以做到. 对于使用stm32w系列的MCU,需要下载新的openocd-0.7及以上版本才能支持.0. ...
- 点击按钮,通过JS代码实现复制INPUT表单,表格:
获取表单: <SCRIPT LANGUAGE="JavaScript"> function copyinput() { var input=document.getEl ...
- C# WinForm程序退出的方法(转)
转自:http://www.cnblogs.com/yugen/archive/2010/08/10/1796864.html 1.this.Close(); 只是关闭当前窗口,若不是主窗体的话, ...
- WinFrom打开一个窗体关闭另一个窗体
在写Winform程序的时候,经常会遇到“打开一个新的窗体然后关闭本窗体”之类的问题.最常见的就是登陆界面和主窗体了.而最常见的处理方法就是表单判断正确后 new MainForm().Show(); ...
- vi/vim多行注释和取消注释
多行注释: 1. 进入命令行模式,按ctrl + v进入 visual block模式,然后按j, 或者k选中多行,把需要注释的行标记起来 2. 按大写字母I,再插入注释符,例如// 3. 按esc键 ...
- jsonp总结
由于“同源策略”的限制,ajax不能做跨域请求,jsonp是当下解决跨域请求最流行的方案,来个例子(index.html): <!doctype html> <html lang=& ...
- vs10创建sqlclr部署失败
将项目解决方案改为3.5,调试OK: