1

티스토리툴바

PHP - 게시판 제작 - 파일 업로드

PHP - 게시판 제작 - 파일 업로드

노아의 블로그

    목차
반응형

게시판에 사진이나 다른 파일이 빠질수는 없죠.

한번 제작 해 봅시다.

 

먼저 board/register.php에 파일 업로드 형식을 지정합니다.

<!DOCTYPE html>
<html>
<head>
    <title>Board register</title>
</head>
<body>
    <h1>Write page</h1>
    <form method="post" action="" >
    	<input type="text" name = "title" placeholder="Enter title">
    	<br>
    	<textarea name = "content" rows="10" cols="100" placeholder="Enter content"></textarea>
    	<br>
    	파일 업로드 <input type="file" name = "file"></input>
    	<br>
    	<input type="submit" value="write"></input>
    </form>
</body>
</html>

<input> file을 넣습니다.

파일 업로드 형식이 추가되었습니다. 아무 파일이나 넣고 요청을 보냈습니다.

 

 

HTTP 요청 BODY를 보니 이런식으로 파라미터가 보내지는것을 볼 수 있습니다.

 

이상한 점 눈치채셨나요?

 

네. file에 진짜 데이터가 아니라 그냥 단순한 file name만 파라미터 값으로 들어가네요.

 

이것은 요청 방식에 문제가 있습니다.

 

현재 HTTP 요청 헤더를 보면

 


Content-Type: application/x-www-form-urlencoded 

라고 보입니다.

 

Content-Type는 요청 바디에 있는 데이터의 타입을 결정합니다.

현재 url 인코딩을 하고 있네요.

 

아까 보았던 title=test&content=test&file=file.png 이런 형태로 데이터가 키와 값으로 나뉘며 &로 구분되는 형식이 바로 url 인코딩 방식입니다.

 

하지만 이 요청 방식은 사진이나 파일을 보내기에는 적합하지 않습니다.

 

왜냐하면. 파일은 하나의 데이터가 아니라 많은 데이터가 있기 때문이죠.

파일 이름부터 파일의 진짜 데이터, 확장자 등등이요.

 

또한 파일의 데이터는 바이너리 데이터 형태로 0과1로 구분되어있는 데이터 입니다. 인코딩을 하면 안됩니다.

 

그래서 파일을 보낼때 multipart/form-data 형태로 보내야 합니다. 

 

multipart/form-data는 파일을 바이너리 데이터로 전송하기 위해 인코딩을 하지 않으며 

요청 바디를 나눠서 각 부분에 정보를 담아 데이터를 전송하므로 파일 업로드에 적합합니다.

 

한번 해 보겠습니다.

 

<!DOCTYPE html>
<html>
<head>
    <title>Board register</title>
</head>
<body>
    <h1>Write page</h1>
    <form method="post" action="" enctype = "multipart/form-data">
    	<input type="text" name = "title" placeholder="Enter title">
    	<br>
    	<textarea name = "content" rows="10" cols="100" placeholder="Enter content"></textarea>
    	<br>
    	파일 업로드 <input type="file" name = "file"></input>
    	<br>
    	<input type="submit" value="write"></input>
    </form>
</body>
</html>

enctype 속성을 multipart/form-data로 변경합니다.

 

아까처럼 파일을 넣고 다시 요청을 해 봅시다.

 

 Content-Type가 변했고요.

 

제목이 fileupload!

 

내용이 hello! 가 들어갔네요.

 

마지막으로 file을 보니 파일 이름과 타입이 나뉜것을 확인이 가능하고요.

밑에는 파일의 데이터가 있는것을 볼 수 있습니다. 내용이 이상한것은 아마 인코딩 때문으로 추측됩니다.

 

이제 파일을 서버에 정상적으로 요청했습니다.

 

요청 "만" 했습니다.

 

저희가 개발하고 싶은 기능은 사용자가 어떠한 게시글에 사진을 업로드 하면

그 사진을 저장하고 게시글을 조회할때 사진을 불러오는 기능을 개발하려고 하는것이죠.

 

그러니 서버에 파일을 다운로드 해야 합니다. 

 

이런식으로요. 

 

이제 PHP로 넘어가 봅시다.

 

GET,POST 와 똑같죠 id를 요청했다면 _GET['id'];

file input 태그에 name이 file이니까 

_FILES['file']; 로 가져오시면 됩니다.

$file = $_FILES['file'];
echo $file['name'];

 

 

상단에 파일 이름이 잘 출력되었네요.

파일 객체에 접근 테스트는 끝났습니다.

 

$file = $_FILES['file'];
$filename = $file['name'];
$uploadDir = '/var/www/html/';
$tempFilePath = $file['tmp_name'];
$uploadPath = $uploadDir . $filename;
    // 파일을 지정된 경로로 이동
    if (move_uploaded_file($tempFilePath, $uploadPath)) {
        // 파일 업로드 성공
        echo "File uploaded successfully.";
    } else {
        // 파일 업로드 실패
        echo "Error uploading file.";
    }

이러한 코드를 작성 해 줍니다.

 

먼저 파일 객체를 가져오고

이름과 업로드 할 경로를 세팅합니다.

 

temppath는 파일이 업로드 될때 임시 디렉토리에 저장되기 때문입니다.

 

그리고 upload path로 디렉토리 + 파일이름을 해 줍니다.

 

마지막으로 임시 저장 디렉토리의 파일을 진짜 저장 디렉토리로 옮기면 파일 업로드 과정이 끝납니다.

 

하지만 Error 가 발생합니다. 그 이유는 파일 권한이 없기 때문입니다.

 

터미널에서 이러한 명령어를 입력해 var의 권한과 하위 디렉토리까지 열어줍니다.

(실제 서비스는 제한적으로 열어줘야함 이건 학습용)

 

다시 실행하면 정상적으로 파일이 등록됩니다.

 

파일 저장 경로에 가보니 test.png가 보이고 그림이 보이네요!

파일 업로드에 성공했습니다.

반응형

'WEB > PHP' 카테고리의 다른 글

PHP 게시판 제작 - 조회수 기능  (0) 2023.05.27
PHP - 게시판 제작 10 - 페이징  (0) 2023.05.20
PHP - 게시판 제작 9 - 게시글 검색하기  (0) 2023.05.07

이 글도 관심있으실 것 같아요!

티스토리툴바