文件上傳和預覽功能在現在的網頁中十分普遍，例如上傳頭像，頭像預覽，上傳各類型文件等。
今天就介紹一下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 }