현재 위치: > 최신 기사 목록> 진행률 표시 줄을 사용하여 AJAX 파일 업로드 기능을 구현하는 방법 : PHP 샘플 자습서

진행률 표시 줄을 사용하여 AJAX 파일 업로드 기능을 구현하는 방법 : PHP 샘플 자습서

gitbox 2025-06-25

1. 소개

최신 웹 애플리케이션에서 파일 업로드는 일반적인 요구 사항이며 AJAX를 통한 파일 업로드는 더 부드러운 사용자 경험을 제공 할 수 있습니다. 사용자는 페이지를 새로 고치지 않고 파일 업로드를 완료 할 수 있으며 진행 상황이 너무 길어서 불확실성을 피하기 위해 진행률 표시 줄을 통해 실시간으로 업로드 진행 상황을 볼 수 있습니다.

2. 구현 원리

진행률 표시 줄로 AJAX 파일 업로드 기능을 구현하려면 다음 단계가 필요합니다.

2.1 업로드 양식을 만듭니다

먼저 파일 업로드 함수가 포함 된 HTML 양식을 작성해야합니다. 파일 업로드 기능은 양식의 ENCTYPE를 "multipart/form-data"로 설정하여 지원됩니다.

 
  <form action="upload.php" method="post" enctype="multipart/form-data">
      <input type="file" name="file" id="file">
      <input type="submit" value="업로드">
  </form>
  

2.2 Ajax를 사용하여 파일을 보냅니다

다음으로 Ajax를 사용하여 파일을 비동기로 제출합니다. javaScript를 통해 사용자가 선택한 파일을 가져오고 FormData 객체를 사용하여 Form Data를 작성하고 XMLHTTPREQUEST 객체를 통해 데이터를 서버로 보냅니다.

다음은 구현 된 JavaScript 코드의 예입니다.

 
  var fileInput = document.getElementById("file");
  var file = fileInput.files[0];
  var formData = new FormData();
  formData.append("file", file);
  
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "upload.php", true);
  
  xhr.upload.addEventListener("progress", function(e) {
      var percent = Math.round((e.loaded / e.total) * 100);
      console.log("업로드进度:" + percent + "%");
  });
  
  xhr.send(formData);
  

2.3 서버 측 처리

서버는 업로드 된 파일을 수신하고 처리해야합니다. PHP에서는 다음 코드를 사용하여 업로드 된 파일을 서버의 지정된 디렉토리에 저장할 수 있습니다.

 
  <?php
  $targetDir = "uploads/";
  $targetFile = $targetDir . basename($_FILES["file"]["name"]);
  
  if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
      echo "文件업로드成功!";
  } else {
      echo "文件업로드失败!";
  }
  ?>
  

3. 진행률 표시 줄을 추가하십시오

사용자가 파일 업로드의 진행 상황을 명확하게 볼 수 있도록 XMLHTTPREQUEST의 진행 상황을 사용하여 업로드 진행 상황을 듣습니다. 이 이벤트를 통해 프론트 엔드 페이지에서 진행률 표시 줄 상태를 업데이트 할 수 있습니다.

진행률 표시 줄을 업데이트하는 코드는 다음과 같습니다.

 
  xhr.upload.addEventListener("progress", function(e) {
      var percent = Math.round((e.loaded / e.total) * 100);
      var progressBar = document.getElementById("progressBar");
      progressBar.style.width = percent + "%";
  });
  

위의 코드를 통해 업로드 프로세스 중에 진행률 표시 줄의 너비를 동적으로 업데이트하여 업로드 진행 상황을 실시간으로 표시 할 수 있습니다.

4. 요약

위의 단계를 통해 진행률 표시 줄이있는 Ajax 파일 업로드 기능을 성공적으로 구현했습니다. 사용자가 파일을 업로드하면 실시간 진행 상황을 볼 수있을뿐만 아니라 원활한 경험도 즐길 수 있습니다. 이 기능의 구현에는 프론트 엔드 Ajax 기술과 백엔드 PHP 파일 업로드 처리가 포함됩니다. 이 단계를 사용하면 진행률 표시 줄로 파일 업로드 기능을 쉽게 빌드 할 수 있습니다.

AJAX 파일 업로드에는 프론트 엔드 간의 협업 작업이 필요하지만 각 단계의 구현을 이해함으로써 관련 기능의 개발을 성공적으로 완료 할 수 있습니다.