php 파일 업로드 및 프로필 미리 보기 기능 구현

php 파일 업로드 원 리 는 form 폼 의 enctype="multipart/form-data"속성 을 통 해 wamp 폴 더 의 tmp 디 렉 터 리 에 파일 을 임시로 저장 한 다음 배경 phop 프로그램 을 통 해 파일 을 체통 에 저장 하 는 것 입 니 다.
html 코드:

<form action="shangchuan.php" method="post" enctype="multipart/form-data">
 <input type="file" name="file" />
 <input type="submit" value="  " />
</form>
백그라운드 처리 인터페이스(shangchuan.php):
다음 과 같은 몇 가지 주의 가 필요 합 니 다.
1.파일 업로드 형식 제어
2.업로드 파일 의 크기 조절
3.파일 이름 중복 방지
저 장 된 파일 이름 수정
사용자 이름+타임 스탬프+난수+파일 이름
일련 번호
폴 더 를 사용 하려 면 경 로 를 미리 만들어 야 합 니 다.
4.파일 저장

//          
if($_FILES["file"]["error"])
{
 echo $_FILES["file"]["error"];
}
else
{
 //         ,  
 if(($_FILES["file"]["type"]=="image/jpeg" || $_FILES["file"]["type"]=="image/png") && $_FILES["file"]["size"]<1024000)
 {
  //         
  $filename = "./file/".date("YmdHis").$_FILES["file"]["name"];
   
  //      
  $filename = iconv("UTF-8","gb2312",$filename);
   
  //        
  if(file_exists($filename))
  {
   echo "      !";
  }
  else
  {
   //    
   move_uploaded_file($_FILES["file"]["tmp_name"],$filename);
  }
 }
 else
 {
  echo "       !";
 }
}
업로드 단 추 를 누 르 면 파일 은 시스템 의 지정 한 경로 에 저 장 됩 니 다.

저장 후 지정 한 방법 으로 파일 이름 바 꾸 기:

프로필 사진 업로드 미리 보기
원리:html 인터페이스 에서 이미지 크기 의 div 를 만 들 고 이미지 업로드 배경 을 설정 하 며 div 에서 파일 을 업로드 하 는 input 를 만 들 고 투명 도 는 0 으로 설정 합 니 다.
이렇게 하면 이 div 를 클릭 하면 업로드 효과 와 같 을 수 있 습 니 다.

<title>     </title>
<style type="text/css">
#yl{ width:200px; height:300px; background-image:url(img/11.png); background-size:200px 300px;}
#file{ width:200px; height:300px; float:left; opacity:0;}
</style>
</head>
 
<body>
 
<form id="sc" action="chuli.php" method="post" enctype="multipart/form-data" target="shangchuan">
  
 <input type="hidden" name="tp" value="" id="tp" />
  
 <div id="yl">
  <input type="file" name="file" id="file" onchange="document.getElementById('sc').submit()" />
 </div>
  
  
  
</form>
 
<iframe style="display:none" name="shangchuan" id="shangchuan">
</iframe>
 
 
</body>
 
<script type="text/javascript">
 
//    ,            ,     
function showimg(url)
{
 var div = document.getElementById("yl");
 div.style.backgroundImage = "url("+url+")";
  
 document.getElementById("tp").value = url;
}
 
</script>
 
</html>
php 처리 인터페이스(chuli.php):

<?php
 
if($_FILES["file"]["error"])
{
 echo $_FILES["file"]["error"];
}
else
{
 if(($_FILES["file"]["type"]=="image/jpeg" || $_FILES["file"]["type"]=="image/png")&& $_FILES["file"]["size"]<1024000)
 {
  $fname = "./img/".date("YmdHis").$_FILES["file"]["name"]; 
   
  $filename = iconv("UTF-8","gb2312",$fname);
   
  if(file_exists($filename))
  {
   echo "<script>alert('      !');</script>";
  }
  else
  {
   move_uploaded_file($_FILES["file"]["tmp_name"],$filename);
    
   unlink($_POST["tp"]);
    
   echo "<script>parent.showimg('{$fname}');</script>";
  }
   
 }
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기