게시물 작성 페이지 수정 : write_post.php

DATE : 2023/12/26

이전에 작성했던 write_post.php는

사용자가 게시물을 작성하는 페이지로 제목과 내용을 입력하는 아주 간단한 페이지였다.

오늘은 이 페이지에 파일을 업로드하는 기능을 추가해볼까 한다.

결과를 먼저 확인해보자면, 위의 사진처럼 파일을 선택할 수 있는 옵션이 추가되어

파일을 업로드할 수 있는데

만약 파일 확장자가 허용되지 않는 파일이라면

에러가 발생하게 되고 그 이후의 코드를 실행되지 않는다.

반대로 허용되는 확장자의 파일을 업로드하는 경우에는

큰 문제 없이 처리되도록 코드를 작성해볼 것이다!

[ upload_board.php ]

<?php
    ...
    if($_FILES['uploaded_file']['name']!='') {
        $dir_name = "./files";

        if(!is_dir($dir_name)) {
            if(!mkdir($dir_name, 0777)) {
                echo '<script>alert("Directory Error");
                window.location.replace("./write_post.php")
                </script>';
                exit;
            }
        }

        $name = $_FILES['uploaded_file']['name'];
        $error = $_FILES['uploaded_file']['error'];

        if($error != 0) {
            echo '<script>alert("File Upload Error1");
                window.location.replace("./write_post.php")
            </script>';
            exit;
        }

        $full_file_path = $dir_name.'/'.$name;
        $file_info = pathinfo($full_file_path);

        $ext = $file_info['extension'];
        $allow_extensions = array('jpg','jpeg','png','txt','gif');

        if(!in_array($ext, $allow_extensions)) {
            echo '<script>alert("File Upload Error2");
                window.location.replace("./write_post.php")
            </script>';
            exit;
        }

        if(!move_uploaded_file($_FILES['uploaded_file']['tmp_name'],$full_file_path)) {
            echo '<script>alert("File Upload Error3");
                window.location.replace("./write_post.php")
            </script>';
            exit;
        }
    }
    
    ...

?>

사용자가 게시물 작성을 마친 후, POST 버튼을 누르면 위에 작성된 upload_board.php가 실행된다.

(위에 적어둔 코드는 전체 코드가 아닌, 파일 업로드와 관련된 부분만 가지고 왔다!)

우선, 사용자가 게시물을 작성할 때 꼭 파일을 업로드하지 않을 수 있기 때문에

if($_FILES['uploaded_file']['name']!='') {...}

선택된 파일 이름이 공백이 아니라면 즉, 사용자가 어떤 파일을 선택했을 경우에만 다음의 내용이 실행된다.

(1) 파일 업로드할 Directory 존재 유무 확인하기

$dir_name = "./files";

if(!is_dir($dir_name)) {
    if(!mkdir($dir_name, 0777)) {
        echo '<script>alert("Directory Error");
        window.location.replace("./write_post.php")
        </script>';
        exit;
    }
}

사용자가 파일을 업로드 하는 경우에는 업로드 된 파일을 넣어둘 Directory가 필요하다.

만약 기본적으로 설정해둔 Directory가 존재하지 않는 경우 (!is_dir())

지정해둔 Directory name으로 새로운 폴더를 생성한다.

(2) 에러 확인

$name = $_FILES['uploaded_file']['name'];
$error = $_FILES['uploaded_file']['error'];

if($error != 0) {
    echo '<script>alert("File Upload Error");
        window.location.replace("./write_post.php")
    </script>';
    exit;
}

파일을 업로드하는 과정을 좀 더 세분화해서 보면

(1) 사용자가 파일을 업로드하면

(2) 임시 폴더에 넣어두었다가

(3) move_uploaded_file 함수를 통해 실제 서버 상의 폴더로 이동 시킨다.

이 중에서 (1)번이 수행되던 중 에러가 발생하는 경우,

$error = $_FILES['uploaded_file']['error'];

에러 유형에 따라 0부터 7까지 에러 코드를 알아낼 수 있다.

주의할 점은 에러가 발생하지 않을 경우에도 코드가 존재하며 이를 int 0으로 나타낸다는 것이다.

따라서 위의 코드에서는

if($error != 0) {...}

에러가 발생했는지 확인해, 에러가 발생한 경우를 따로 처리하고 있는 것이다.

(3) 파일 확장자 검사하기

$full_file_path = $dir_name.'/'.$name;
$file_info = pathinfo($full_file_path);

$ext = $file_info['extension'];
$allow_extensions = array('jpg','jpeg','png','txt','gif');

if(!in_array($ext, $allow_extensions)) {
    echo '<script>alert("File Upload Error");
        window.location.replace("./write_post.php")
    </script>';
    exit;
}

파일을 업로드하는 과정에서 에러가 발생하지 않았다면

업로드를 허용하는 파일 확장자인지 확인해 최종적으로 파일을 업로드할 것 인지, 말 것 인지를 판단한다.

현재 허용하는 파일 확장자는

jpg, jpeg, png, gif, txt

총 5개로 제한해둔 것을 볼 수 있다.

사용자가 업로드한 파일의 확장자를 알기 위해선 함수 pathinfo() 결과 중

$file_info['extension']

extension 값을 확인해보면 된다.

사용자가 업로드한 파일의 확장자가 허용되는 확장자인지 확인하는 절차를 거쳐

if(!in_array($ext, $allow_extensions)) {...}

if문에 처리되지 않는다면 최종적으로 실제 서버에 만들어둔 Directory로 파일을 옮기는 작업을 수행한다.

(4) 파일 옮기기

if(!move_uploaded_file($_FILES['uploaded_file']['tmp_name'],$full_file_path)) {
    echo '<script>alert("File Upload Error");
        window.location.replace("./write_post.php")
    </script>';
    exit;
}

임시로 파일 이름을 부여해 가지고 있다가 위에서 지정해둔 /files directory로

옮기는 과정을 수행하기 위해서는 함수 move_uploaded_file() 을 사용하면 된다.

만약 파일을 옮기는 과정에서 에러가 발생하면 다시 게시물 작성 페이지로 돌아가게 되고

별 다른 문제 없이 처리가 끝난다면

새로 만들어진 Directory 안에 업로드한 파일이 들어가 있는 걸 확인할 수 있을 것이다. 👍