php+html 5 리 셋 없 는 이미지 업로드 튜 토리 얼 구현

5085 단어 phphtml5리 셋 없 음사진 업로드
html 5 의 FileReader 를 이용 하여 그림 파일 을 읽 고 서버 에 데 이 터 를 전송 한 후 PHP 로 처리 하 는 새로운 업로드 방식 을 소개 합 니 다.구현 과정 은 다음 과 같 습 니 다(그림 미리 보기 기능 포함)
전단 html 코드 업로드,html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>  </title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
.upload{
  width:300px;
  height:200px;
  position:relative;
}
.upload input[type='file']{
  position:absolute;
  width:70px;
  top:0;
  left:0;
  z-index:10;
  opacity:0;
  filter:alpha(opacity=0);
}
.upload input.selbutton{
  width:70px;
  height:30px;
  background:#cf001b;
  color:#FFF;
  font-size:14px;
  position:absolute;
  top:0;left:0;
  z-index:9;
  border:none;
  cursor:pointer;
}
.upload input.upbutton{
  width:70px;
  height:30px;
  background:#cf001b;
  color:#FFF;
  font-size:14px;
  position:absolute;
  top:50px;left:0;
  z-index:10;
  border:none;
  cursor:pointer;
}
</style>
</head>
<body>
<div class='upload'>
  <input type="file" name="file" />
  <input type="button" name="selbutton" class="selbutton" value="    " />
  <input type="button" name="upbutton" class="upbutton" value="  " />
</div>
<div class='previews'>
  <img src="#" class="image_thumb" alt="    "/>
</div>
</body>
</html>
양식 은 아래 그림 과 같다.

다음은 js 코드.

<script type="text/javascript">
  $(".upbutton").click(function(){
    //                      ，           
   var filetype = ['jpg','jpeg','png','gif'];
   if($('.image').get(0).files){
      fi = $('.image').get(0).files[0]; //      
      //                     false
      var fname = fi.name.split('.');
      if(filetype.indexOf(fname[1].toLowerCase()) == -1){
        alert('       ');
        return ;
      }
      //   h5 fileReader
      var fr = new FileReader();
      fr.readAsDataURL(fi); // base64          
      fr.onload = function(frev){
        pic = frev.target.result; //      
      //      ，    
 $('.image_thumb').attr('src',pic);
//  ajax   post      
        $.post(
          'handle.php',
          {
             message:pic,
            filename:fname[0],
            filetype:fname[1],
            filesize:fi.size
          },
          function(data){
            data = eval('('+data+')');
            if(data.code == 1 || data.code == 2){
              console.log('    ')
            }else if(data.code == 0){
              console.log('    ')
            }
          }
        );
      }
    }
  })
</script>
다음은 PHP 처리 코드 입 니 다.  handle.php

$imgtype = array(
  'gif'=>'gif',
  'png'=>'png',
  'jpg'=>'jpeg',
  'jpeg'=>'jpeg'
); //                
$message = $_POST['message']; //   base64       
$filename = $_POST['filename']; //      
$ftype = $_POST['filetype']; //      
//        ，       base64     
$message = base64_decode(substr($message,strlen('data:image/'.$imgtype[strtolower($ftype)].';base64,')));
$filename = $filename.".".$ftype;
$furl = "D:/now/";
//     
$file = fopen($furl.$filename,"w");
if(fwrite($file,$message) === false){
  echo json_encode(array('code'=>1,'con'=>'failed'));
  exit;
}
echo json_encode(array('code'=>0,'con'=>$filename));
파일 을 선택 하고 업로드 효 과 를 누 르 면 다음 그림 과 같 습 니 다.

이상 은 전체 사진 에 올 라 온 코드 입 니 다.물론 PHP 의 부분 에 대해 최적화 할 수 있 는 부분 이 많 습 니 다.예 를 들 어 파일 이름 부분 은 이름 을 바 꾸 고 같은 파일 이름 이 올 라 온 후의 파일 이름 이 다 를 수 있 도록 하 는 등 입 니 다.이런 업로드 방식 은 저도 처음에 사용 하기 시 작 했 습 니 다.처음에 Node.js 가 업로드 한 시사 점 을 받 고 PHP 에 응용 하려 고 했 는데 정말 업로드 에 성공 할 줄 은 몰 랐 습 니 다.
여러분 도 이 방법 에 따라 사진 업 로드 를 실현 할 수 있 기 를 바 랍 니 다.
자바 에서 포크-join 의 원리 해석
ODBC 데이터 베 이 스 를 사용 하여 Serv-U 를 관리 하 는 FTP 사용자 및 관련 ASP 프로 그래 밍[소스 코드 예제 다운로드]

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage