PHP+Ajax 파일 업로드 진행 막대 동적 표시 진행 기능 구현

3593 단어 phpajax파일 업로드진도 표

전제 조건:PHP 프로필 에는 기본 업로드 파일 크기 제한 2M 이하 가 규정 되 어 있 습 니 다.큰 파일 을 업로드 하려 면 php.ini 의upload_max_filesize와max_execution_time,post_max_size의 값 을 동시에 변경 해 야 합 니 다.
메 인 인터페이스 및 Ajax 구현:index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>    </title> 
  <script type="text/javascript"> 
    function sub() { 
      var obj = new XMLHttpRequest(); 
      obj.onreadystatechange = function() { 
        if (obj.status == 200 && obj.readyState == 4) { 
          document.getElementById('con').innerHTML = obj.responseText; 
        } 
      } 
      //   Ajax   upload   onprogress             
      obj.upload.onprogress = function(evt) { 
        //            
        var per = Math.floor((evt.loaded / evt.total) * 100) + "%"; 
        //             
        document.getElementById('parent').style.display = 'block'; 
        //                   
        document.getElementById('son').style.width = per; 
        //               
        document.getElementById('son').innerHTML = per; 
      } 
      //   FormData            
      var fm = document.getElementById('userfile3').files[0]; 
      var fd = new FormData(); 
      fd.append('userfile', fm); 
      obj.open("post", "upload.php"); 
      obj.send(fd); 
    } 
  </script> 
  <style type="text/css"> 
    #parent { 
      width: 200px; 
      height: 20px; 
      border: 2px solid gray; 
      background: lightgray; 
      display: none; 
    } 
    #son { 
      width: 0; 
      height: 100%; 
      background: lightgreen; 
      text-align: center; 
    } 
  </style> 
</head> 
<body> 
  <h2>Ajax         </h2> 
  <div id="parent"> 
    <div id="son"></div> 
  </div> 
  <p id="con"></p> 
  <input type="file" name="userfile" id="userfile3"><br><br> 
  <input type="button" name="btn" value="    " onclick="sub()"> 
</body> 
</html>
php 처리 업로드 파일:upload.php

<?php  
  //              
  if ($_FILES['userfile']['error'] > 0) { 
    exit("      ".$_FILES['userfile']['error']); 
  } 
  //               
  $path = './upload/'; 
  //                 
  $name = $_FILES['userfile']['name']; 
  //             UTF-8  GB2312 
  $name = iconv("UTF-8", "GB2312", $name); 
  //                 
  if (move_uploaded_file($_FILES['userfile']['tmp_name'], $path.$name)) { 
    echo "      "; 
  } else { 
    echo "      "; 
  } 
 ?>
총결산
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 PHP+Ajax 가 업로드 파일 진도 바 동적 표시 진도 기능 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 제때에 여러분 에 게 답 할 것 입 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
PHP 는 정규 표현 식 을 사용 하여 불법 문자열 필터 기능 예시 구현
안 드 로 이 드 는 SlidingPaneLayout 를 사용 하여 위 챗 의 미끄럼 을 되 돌려 줍 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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