[javascript] jQuery로 AJAX를 이용한 파일 업로드 구현하기

18 Dec 2023

javascript

파일 업로드는 웹 애플리케이션에서 자주 사용되는 기능 중 하나입니다. AJAX를 이용하여 파일을 업로드하면 페이지 새로고침 없이 파일을 서버에 전송할 수 있습니다. 이번 글에서는 jQuery를 사용하여 AJAX를 통해 파일을 업로드하는 방법에 대해 살펴보겠습니다.

1. HTML 파일 작성

먼저, HTML 파일을 작성하여 파일 업로드를 위한 화면을 구성합니다. 아래는 간단한 형태의 HTML 코드입니다.

<!DOCTYPE html>
<html>
<head>
    <title>파일 업로드 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="file" id="fileInput">
    <button id="uploadBtn">업로드</button>
    <div id="result"></div>

    <script>
        // AJAX를 이용한 파일 업로드 구현
        // ...
    </script>
</body>
</html>

2. JavaScript로 AJAX 파일 업로드 구현

다음으로, JavaScript를 사용하여 AJAX 파일 업로드를 구현합니다. jQuery의 $.ajax 함수를 사용하여 POST 요청을 보내고, FormData 객체를 사용하여 파일을 포함시킵니다.

$(document).ready(function() {
    $('#uploadBtn').click(function() {
        var fileInput = document.getElementById('fileInput');
        var file = fileInput.files[0];
        var formData = new FormData();
        formData.append('file', file);

        $.ajax({
            url: 'upload.php',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                $('#result').text('파일 업로드 성공: ' + response);
            },
            error: function(xhr, status, error) {
                $('#result').text('파일 업로드 실패: ' + error);
            }
        });
    });
});

3. 서버 측 코드 작성

마지막으로, 서버 측에 파일을 받아서 저장하는 코드를 작성해야 합니다. 위 예시에서는 upload.php 파일을 사용하였으므로, PHP에서 파일을 처리하는 방법에 대해 작성합니다.

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
    $file = $_FILES['file'];
    $uploadPath = 'uploads/' . basename($file['name']);
    if (move_uploaded_file($file['tmp_name'], $uploadPath)) {
        echo $uploadPath;
    } else {
        http_response_code(500);
        echo '파일 업로드 실패';
    }
} else {
    http_response_code(400);
    echo '잘못된 요청';
}
?>

마치며

이제 jQuery를 사용하여 AJAX를 통해 파일 업로드하는 방법에 대해 알아보았습니다. 이를 통해 페이지 새로고침 없이 파일을 업로드하는 웹 애플리케이션을 구축할 수 있게 되었습니다.