자바스크립트 fetch()함수_ 파일업로드

자바스크립트 fetch()함수를 이용하여 파일 업로드

let formElement = document.getElementById("form_ch1");
let formData = new FormData(formElement);

fetch("modal_img.php", {
    method: "POST",
    body: formData,
    headers: {
        // 'Content-Type': 'multipart/form-data' 👈 FormData 사용 시 명시하지 않음! (자동 생성됨)
        "Accept": "application/json" // 서버가 JSON 응답을 반환하도록 요청
    }
})
.then(response => response.json())
.then(data => console.log("서버 응답:", data))
.catch(error => console.error("에러 발생:", error));

 

 

fetch 요청에 headers를 추가하면, 서버가 요청을 올바르게 인식할 수 있도록 설정할 수 있습니다.
하지만 FormData 객체를 사용할 때 Content-Type을 명시적으로 설정하면 boundary 값이 자동으로 추가되지 않아 업로드가 실패할 수 있습니다.
따라서 Content-Type을 직접 지정하지 않고 서버가 자동으로 처리하도록 두는 것이 좋습니다.

 

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $title = $_POST['title'] ?? '';
    $body = $_POST['body'] ?? '';
    $userId = $_POST['userId'] ?? '';

    // 파일 업로드 확인
    if (!empty($_FILES['imgfile1']['name'])) {
        $uploadDir = "uploads/";
        $uploadFile = $uploadDir . basename($_FILES['imgfile1']['name']);

        if (move_uploaded_file($_FILES['imgfile1']['tmp_name'], $uploadFile)) {
            echo "파일 업로드 성공: " . $uploadFile;
        } else {
            echo "파일 업로드 실패.";
        }
    }

    echo "제목: " . htmlspecialchars($title) . "<br>";
    echo "내용: " . htmlspecialchars($body) . "<br>";
    echo "사용자 ID: " . htmlspecialchars($userId) . "<br>";
}