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 }
这样就实现了一个上传预览到选中的大图的功能