파일 업로드 기능을 구현하고, 화면 갱신 없이 웹 페이지에 파일을 전송하고 싶다면 AJAX를 사용할 수 있습니다. 이 글에서는 PHP를 사용하여 파일 업로드를 구현하고, AJAX를 이용하여 화면을 새로고침하지 않고 파일을 전송하는 방법에 대해 알아보겠습니다.

파일 업로드 기능을 갖춘 HTML 폼 작성

가장 먼저 파일을 업로드할 수 있는 HTML 폼을 작성해야 합니다. 아래는 파일을 업로드할 수 있는 간단한 HTML 폼입니다.

<form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="Upload File">
</form>

AJAX를 이용한 파일 업로드

이어서, AJAX를 이용하여 파일을 서버로 전송하는 JavaScript 코드를 작성합니다. 아래는 jQuery 라이브러리를 사용한 AJAX 파일 업로드의 예시입니다.

$('#uploadForm').submit(function(e) {
  e.preventDefault();
  var formData = new FormData(this);
  $.ajax({
    url: 'upload.php',
    type: 'POST',
    data: formData,
    success: function(response) {
      // 파일 업로드 성공 시 실행할 코드
    },
    cache: false,
    contentType: false,
    processData: false
  });
});

파일 업로드 처리를 담당하는 PHP 스크립트 작성

마지막으로, 파일 업로드를 처리하는 PHP 스크립트를 작성해야 합니다. 아래는 파일을 업로드하는 간단한 PHP 코드 예시입니다.

<?php
$targetDirectory = "uploads/";
$targetFile = $targetDirectory . basename($_FILES["file"]["name"]);

if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
  // 파일 업로드 성공 시 실행할 코드
  echo "파일이 성공적으로 업로드되었습니다.";
} else {
  // 파일 업로드 실패 시 실행할 코드
  echo "파일 업로드 중 오류가 발생했습니다.";
}
?>

결론

이제 파일 업로드 기능을 구현하고, AJAX를 이용하여 화면을 갱신하지 않고 파일을 서버로 전송할 수 있습니다. 이를 통해 사용자 경험을 향상시키고, 웹 애플리케이션의 성능을 개선할 수 있습니다.

더 자세한 내용은 웹 개발 가이드를 참조하시기 바랍니다.