php中的文件上传和预览

文件上传和预览功能在现在的网页中十分普遍，例如上传头像，头像预览，上传各类型文件等。

今天就介绍一下php中如何实现这些功能

1.文件上传

文件要上传是需要在表单中提交的，所以先在页面中写出表单元素

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>文件上传</title>
 6 </head>
 7 
 8 <body>
 9 <form action="uploadchuli.php" method="post" enctype="multipart/form-data">  //写好表单提交信息，enctype="multipart/form-data"指的是编码方式为上传多种类型文件和数据流
10 请选择文件<input type="file" name="file"  /><input type="submit" value="上传" />
11 </form>
12 </body>
13 </html>

看看这个简单的上传页面的样子（在不同浏览器上呈现的效果会有差别）

点击上传会将表单数据传给处理页面来看看这个处理页面

用来接收数据用文件专属的$_FILES[]，传递过来的是个二维数组，如下

 1 <?php
 2 $arr=$_FILES["file"];  //这里使用的是文件接收数据方式，不再是get，post
 3 
 4 //加文件限制条件
 5 //文件类型，大小，命名重复
 6 if($arr["type"]=="image/jpeg" || $arr["type"]=="image/png" && $arr["size"]<=1024000)
 7 {
 8 //临时文件的路径
 9 $arr["tmp_name"];
10 //上传的文件存放的位置
11 $filename="./images/".$arr["name"];//拼接时间戳time(),data(),$id用户名,文件夹,来防止文件名重复
12 //编码格式转换
13 //判断文件是否存在
14 if(file_exists($filename)){ echo "文件名已经存在";}
15 else{
16 $filename=iconv("UTF-8","gb2312",$filename);
17 //移动临时文件到上传的文件存的位置
18 move_uploaded_file($arr["tmp_name"],$filename);  //最重要的一步，上传的关键就在这
19 
20 }
21                         
22 }
23 
24 else{
25     
26     echo "上传的文件大小和类型不正确";
27     }
28 
29 
30 ?>

二、文件预览（逻辑上有点绕，看注释吧）

看看上传页面的代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style type="text/css">
 7 #yl{ width:200px; height:300px; background-image:url(images/11.png); background-size:200px 300px;}  //定义上传文件外层div样式 ，默认背景图片，大小
 8 #file{ width:200px; height:300px; float:left; opacity:0;}    //定义上传文件的标签本身样式，标签的大小和外层div一致
 9 </style>
10 </head>
11 
12 <body>
13 
14 <form id="sc" action="chuli.php" method="post" enctype="multipart/form-data" target="shangchuan"> //在下面的iframe框架中打开
15     
16     
17     <input type="hidden" name="tp" value="" id="tp" />   //定义一个隐藏表单元素，用来显示当前图片的路径
18     
19     <div id="yl">
20         <input type="file" name="file" id="file" onchange="document.getElementById('sc').submit()" />  //当点击上传就会提交表单内容
21     </div>
22     
23     
24     
25 </form>
26 
27 <iframe style="display:none" name="shangchuan" id="shangchuan">
28 </iframe>
29 
30 
31 </body>
32 
33 <script type="text/javascript">
34 
35 //回调函数,调用该方法传一个文件路径，该变背景图
36 function showimg(url)
37 {
38     var div = document.getElementById("yl");
39     div.style.backgroundImage = "url("+url+")";
40     
41     document.getElementById("tp").value = url;
42 }
43 
44 </script>
45 
46 </html>

看看处理里面

 1 <?php
 2 if($_FILES["file"]["error"])  //判断如果出现上传错误
 3 {
 4     echo $_FILES["file"]["error"];
 5 }
 6 else
 7 {
 8     if(($_FILES["file"]["type"]=="image/jpeg" || $_FILES["file"]["type"]=="image/png")&& $_FILES["file"]["size"]<1024000) //控制文件格式和大小
 9     {
10         $fname = "./images/".date("YmdHis").$_FILES["file"]["name"];    //获取文件路径
11         
12         $filename = iconv("UTF-8","gb2312",$fname);     //转化字符编码
13         
14         if(file_exists($filename))        //判断是否存在同名文件
15         {
16             echo "<script>alert('该文件已存在！');</script>";
17         }
18         else
19         {
20             move_uploaded_file($_FILES["file"]["tmp_name"],$filename);  //将文件上传
21             
22             
23             $delurl = iconv("UTF-8","gb2312",$_POST["tp"]);   
24             unlink($delurl); //删除文件      
25             
26             echo "<script>parent.showimg('{$fname}');</script>";
27         }
28         
29     }
30 }