頭像上傳預覽
阿新 • • 發佈：2017-06-19
float 路徑 utf 圖片 func 亂碼問題 文檔 http public
這個可以測試頭像預覽上傳 需要先將圖片放到服務器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> </head> <body> <form id="sc" action="shangchuan.php" target="hidden_frame" method="post" enctype="multipart/form-data"> <div id="yl" style="margin-left:0px; width:144px; height:170px; background-size:144px 170px; background-image:url(../chexiangqing/images/22.jpg)"> <input type="file" name="file" style="width:144px; height:170px; float:left; opacity:0;" width="146" onchange="document.getElementById(‘sc‘).submit()"/> </div> <input type="button" value="保存"/> </form> <iframe style="display:none;" name="hidden_frame" id="hidden_frame"> </iframe> </body> <script type="text/javascript"> //回調函數 function showimg(aa) { var l = document.getElementById("yl"); l.style.backgroundImage = "url("+aa+")"; } </script> </html>
處理頁面
<?php //上傳文件限制 if ((($_FILES["file"]["type"] == "image/gif")|| ($_FILES["file"]["type"] == "image/jpeg")|| ($_FILES["file"]["type"] == "image/png"))&& ($_FILES["file"]["size"] < 10000000)) { //文件上傳是否出錯 if ($_FILES["file"]["error"] > 0) { echo "上傳出錯: " . $_FILES["file"]["error"] . "<br />"; } else { //判斷文件是否已存在 $filename = "images/".$_FILES["file"]["name"]; $filename = iconv("UTF-8","gb2312",$filename); if (file_exists($filename)) { echo "<script language=‘javascript‘>alert(‘文件已經存在！‘)</script>"; } else { //移動圖片至保存路徑，解決中文亂碼問題 move_uploaded_file($_FILES["file"]["tmp_name"],$filename); echo "<script language=‘javascript‘>parent.showimg(‘".$filename."‘)</script>"; } } } else { echo "上傳失敗"; } ?>
頭像上傳預覽