上传预览

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>无标题文档</title>
 4 <style type="text/css">
 5 #yl{ width:200px; height:300px; background-image:url(img/11.png); background-size:200px 300px;}
 6 #file{ width:200px; height:300px; float:left; opacity:0;} <!--opacity:0 变成透明的意思-->
 7 </style>
 8 </head>
 9 
10 <body>
11 
12 <form id="sc" action="chuli.php" method="post" enctype="multipart/form-data" target="shangchuan"><!--target是打开方式-->
13     
14     <!--这个隐藏的文本框是用来存储图片地址用的，是个隐藏的不显示的-->
15     <input type="hidden" name="tp" value="" id="tp" />
16     
17     
18     <!--文件选择按钮外层套了一个div-->
19     <div id="yl">
20         <input type="file" name="file" id="file" onchange="document.getElementById('sc').submit()" />
21         <!--onchange="document.getElementById('sc').submit()"除了可以使用form表单提交之外还可以
22         用JS代码来提交  这句代码的意思是  只要我选中的这个图片改变了就找到表单sc提交给处理页面-->
23     </div>
24     
25     
26     
27 </form>
28 
29 <!--chuli.php在iframe中打开  iframe里面是可以打开一个网页的-->
30 <iframe style="display:none" name="shangchuan" id="shangchuan">
31 </iframe>
32 
33 
34 </body>
35 
36 <script type="text/javascript">
37 
38 //回调函数,调用该方法传一个文件路径，该变背景图
39 function showimg(url)
40 {
41     var div = document.getElementById("yl");
42     div.style.backgroundImage = "url("+url+")";
43     
44     document.getElementById("tp").value = url;
45 }
46 
47 </script>
48 
49 </html>

chuli.php

 1 <?php
 2 
 3 if($_FILES["file"]["error"]) //判断下有没有出错
 4 {
 5     echo $_FILES["file"]["error"];
 6 }
 7 else
 8 {    //看看上传的图片类型和大小是否符合条件  
 9     if(($_FILES["file"]["type"]=="image/jpeg" || $_FILES["file"]["type"]=="image/png")&& $_FILES["file"]["size"]<1024000)
10     {
11         
12         $fname = "./img/".date("YmdHis").$_FILES["file"]["name"];//$fname是即将要存储的文件名    
13         
14         $filename = iconv("UTF-8","gb2312",$fname);//为了防止中文出现错误，改了一下编码格式。
15         
16         if(file_exists($filename))
17         {
18             echo "<script>alert('该文件已存在！');</script>";
19         }
20         else
21         {
22             move_uploaded_file($_FILES["file"]["tmp_name"],$filename);
23             
24             
25             $delurl = iconv("UTF-8","gb2312",$_POST["tp"]);  //转一下编码格式
26             
27             unlink($delurl); //删除文件  unlink括号里面扔一个文件的路径就可以把该文件删除掉
28             
29             echo "<script>parent.showimg('{$fname}');</script>";
30             //只要上传完成就把showimg回调函数调用一下  并且把该文件路径传过去
31         }
32         
33     }
34 }

这样就实现了一个上传预览到选中的大图的功能