PHP Ajax,새로 고침 없 는 첨부 파일 업로드 실현

6826 단어 phpajax리 셋 없 음업로드
한 사이트 에 있어 서 없어 서 는 안 될 기본 적 인 기능 이 있 는데 그것 이 바로 파일 업로드 이다.PHP 프 리 스트레스 를 사용 하여 파일 업 로드 를 실현 하 는 것 은 천 혜 의 장점 이 라 고 할 수 있 습 니 다.그럼 오늘 은 새로 고침 이 없 는 파일 업 로드 를 하 겠 습 니 다.
--------------------------------------------------------------------------------
일반 양식
전단 페이지

<form action="./fileupload.php" method="POST">
<p>Username<input type="text" name="username" /></p>
<p>Password<input type="password" name="password" /></p>
<p>E-mail<input type="text" name="email" /></p>
<input type="submit" value="Register" />

</form>
백그라운드 처리

print_r($_POST);
$username = $_POSY['username'];
$password = $_POST['password'];
$email = $_POST['email'];

//                  ，         。
・・・
 파일 이 있 는 폼
파일 이 있 는 폼 과 일반 폼 은 큰 차이 가 있 습 니 다.먼저 폼 에 속성 을 설명 해 야 합 니 다.다음 과 같 습 니 다.

서버 에 우리 가 올 린 폼 에 파일 정보 가 포함 되 어 있다 는 것 을 알려 줍 니 다.
리 셋 모드
리 셋 모드,즉 submit 를 클릭 한 후 페이지 가 업무 처리 인터페이스 로 넘 어 갑 니 다.이것 도 우리 가 일반적으로 실현 하 는 폼 의 데이터 제출 이다.
전단 인터페이스

<form action="./fileupload.php" enctype="multipart/form-data" method="post">
<p>Username<input type="text" name="username" /></p>
<p>Password<input type="password" name="password" /></p>
<p>E-mail<input type="text" name="email" /></p>
<p>Photo<input type="file" name="photo" /></p>

<input type="submit" value="Register" />
배경 페이지
백 스테이지 처 리 는 일반적인 폼 데 이 터 를 제외 하고 가장 중요 한 것 은 파일 정 보 를 처리 하 는 것 이다.PHP 에는 업 로드 된 파일 을 임시 데이터 영역 에서 대상 폴 더 로 편리 하 게 옮 겨 서 업 로드 된 업무 논 리 를 실현 할 수 있 는 함수 가 내장 되 어 있 습 니 다.
move_uploaded_file('임시 파일 경로','대상 파일 경로');
리 셋 없 음
무 리 셋 방식 을 사용 하 는 것 과 리 셋 방식 을 사용 하 는 유일한 차이 점 은 페이지 의 점프 를 막 는 것 이다.우 리 는 보통 두 가지 방식 으로 이 루어 진다.
 •폼 제출 이벤트 의 끝 에 return false 를 추가 합 니 다. 

<script>
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(){
  // to do something
  ・・・
  //       
  return false;
}

</script>
 •h5 관련 방식 사용.

<script>
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(event){
  // to do something
  ・・・
  //       
  event.preventDefault();
}

</script>
다른 조작 처 리 는 점프 가 있 는 것 과 일치 하면 된다.
파일 업로드
PHP 는 파일 업로드 가 편리 하고 빠 릅 니 다.하지만 업로드 파일 의 크기 는 무제 한 이 아니다.기본적으로 우리 가 업로드 한 파일 의 크기 를 제한 하 는 두 가지 요소 가 있다.
 •post 의 극치
 •upload 의 극치
php.ini 설정 정 보 를 수 동 으로 변경 하여 업로드 파일 크기 를 제어 할 수 있 습 니 다. 
POST 극치
post_max_size = 200M
업로드 극치
upload_max_filesize=200M
자세 한 내용 업로드
ajax 대상 은 upload 라 는 속성 이 있 고 upload 도 하나의 대상 으로 존재 합 니 다.이것 은 onprogress 라 는 방법 을 가지 고 있 습 니 다.우 리 는 이 방법 을 모니터링 하여 파일 업로드 과정의 백분율 을 볼 수 있 습 니 다.
전단 페이지

<!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>
<script>
  window.onload = function(){
    var form = document.getElementsByTagName("form")[0];

    form.onsubmit = function(evt){
      //       
      var fd = new FormData(form);
      var ajax = new XMLHttpRequest();

      //  Ajax           
      ajax.upload.onprogress = function(evt){
        var loaded = evt.loaded;
        var total = evt.total;
        document.getElementById("progress").value =(loaded/total)*100;
      }



      ajax.onreadystatechange = function() {
        if(ajax.readyState==4){
          alert(ajax.responseText);
        }
      }
      ajax.open('post','./fileupload.php');
      ajax.send(fd);
      //         
      evt.preventDefault();
      //return false;
    }    
  }
</script>
</head>

<body>
<h2>         </h2>
<form action="./fileupload.php">
<p>Username<input type="text" name="username" /></p>
<p>Password<input type="password" name="password" /></p>
<p>E-mail<input type="text" name="email" /></p>
<p>Photo<input type="file" name="photo" /></p>
<!--     -->
<style>
  #parent {width:300px;height:34px;border:1px solid #033;}
  #son {width:100%;height:10%;background-color:green}
  progress {width:100%;height:34px;}
</style>
<div id="parent">
  <div id="son">
    <progress id="progress">
  </div>

</div>


<input type="submit" value="Register" />

</form>

</body>
</html>
백그라운드 처리

<?php
//print_r($_POST);
//echo "---------------------"."<BR>";
//print_r($_FILES);


//        、     ，       upload   
$path = "../upload/";

//          
$origin_name = $_FILES['photo']['name'];
//               
$server_name = $path.$origin_name;

if($_FILES['photo']['error']>0) {
  die("   ！".$_FILES['photo']['error']); 
}
if(move_uploaded_file($_FILES['photo']['tmp_name'],$server_name)){
  echo "<BR>"."Upload Success!";
}else{
  echo "<BR>"."Upload Failed!".$_FILES['photo']['error'];  
}
?>
upload 폴 더 의 존재 성과 경로 문 제 를 기억 하 십시오. 
총결산
파일 업 로드 는 매우 기본 적 인 기능 으로 실현 하기 도 그리 복잡 하지 않다.그러나 이 기능 은 그렇게 중요 합 니 다.저 희 는 파일 업 로드 를 통 해 사용자 의 프로필 사진 과 다른 파일 정 보 를 수정 하 는 데 편리 하 게 협조 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
python 에서 현재 실행 함수 이름 을 가 져 오 는 방법 인 스 턴 스 코드
Python 을 사용 하여 SQLite 데이터베이스 조작

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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