Php로 웹 개발하기 : 게시판(12) - 파일 업로드

게시판의 주요 기능 중 Create 부분에 파일을 업로드하고 이를 확인할 수 있는 기능을 추가해보자.

 

① 파일 업로드

<div class = "posting">
    <input class = "posting_title" name = "create_title" type = "text" placeholder = "제목"/>
    <textarea class = "posting_contents" name = "create_body" placeholder = "내용"></textarea>
    <input class = "upload" type = "file" accept = "image/png, image/jpeg"/>
    <input class = "writeBtn" type = "submit" value = "create">
</div>

제목과 내용 밑에 input type을 file로 설정해서 파일 업로드 구역을 하나 넣어준다.

 

그런데, 이미지를 올리고 나중에 이를 가져오려면 내 로컬과 MySQL 중 어느 곳에 이미지를 저장하는 것이 좋을까 고민하다가 일단 내 로컬에 저장하기로 했다.

 

파일을 업로드할 때 이미지 주소를 생성하고, 그 주소를 사용해서 이미지를 불러오도록 하기 위해 일반적인 HTML 문서에서는 업로드된 파일이 어떻게 표시되는지 확인해보았다.

 

파일을 하나 업로드했는데 이미지는 뜨지 않고 파일명만 떴다.

form에 enctype="multipart/form-data"를 추가하고 input name을 (file로 하니 인식을 못해서) upload_file로 바꿔주었다.

<form action = "board_create.php" method = "post" enctype="multipart/form-data">
    <div class = "posting">
        <input class = "posting_title" name = "create_title" type = "text" placeholder = "제목"/>
        <textarea class = "posting_contents" name = "create_body" placeholder = "내용"></textarea>
        <input class = "upload" name = "upload_file" type = "file" accept = "image/png, image/jpeg"/>
        <input class = "writeBtn" type = "submit" value = "create">
    </div>
</form>

 

PHP에서 파일 업로드는 $_FILES를 사용한다.

($_FILES : An associative array of items uploaded to the current script via the HTTP POST method.)

input으로 type file을 받고 제출을 하면, tmp 폴더에 그 파일이 저장되는데, 그 파일은 나중에 없어지므로 폴더 하나를 만들어서 옮겨와야 한다.

if($_FILES['upload_file'] != NULL){
    $tmp_name = $_FILES['upload_file']['tmp_name'];
    $name = $_FILES['upload_file']['name'];
    $up = move_uploaded_file($tmp_name, "./files/$name");
}

파일을 업로드하면 임시로 저장되는 곳 이름이 tmp_name, 내가 올린 파일 이름이 name이라서 $tmp_name에 있는 파일을 files에 $name으로 옮기는 코드이다.

 

이 과정에서 에러가 좀 많이 발생했는데, 크게 두 가지 에러가 있었다.

첫 번째는 No such file Error인데, full 경로(/file or /var/www/~~/file)를 인식하지 못해서 ./files로 바꿔주었다.

두 번째는 권한 Error인데 이것저것 시도해봤지만 결국 chmod -R 777로 해결되었다.

sudo chmod -R 777 /var/www/html/web_dev/files
sudo chmod -R 777 /var/www/html/web_dev/board_create.php

사진을 저장할 폴더와 업로드 기능이 구현된 파일 모두 777 권한을 주었다.

 

파일이 files 안에 잘 들어갔다.

 

여기서 한 걸음 더 나아가서, 사용자별로 올린 파일을 구분하기 위해 files 안에 username으로 폴더를 생성하고 그 안에 파일을 넣도록 코드를 바꾸었다.

if($_FILES['upload_file'] != NULL){
    $tmp_name = $_FILES['upload_file']['tmp_name'];
    $name = $_FILES['upload_file']['name'];
    $path = "./files/$username";
    if(!file_exists($path)){
        mkdir($path, 0777, true);
        chmod($path, 0777);
        $up = move_uploaded_file($tmp_name, "$path/$name");
    }else{
        $up = move_uploaded_file($tmp_name, "$path/$name");
    }
}

file_exists를 통해 폴더가 있는지 확인해준 후, 없으면 만들어서 권한을 부여해주고 있으면 파일만 옮기는 코드이다.

files/test에 사진이 잘 들어간 것을 확인할 수 있다.

 

다음에는 글 수정 기능에 파일 수정 기능을 추가하고, 글 읽기에서 파일 내용을 확인할 수 있도록 할 것이다.