PHP(10) 이미지 업로드

이번에는 리뷰를 작성할 때 사진을 첨부를 해보겠습니다.

 

먼저 writeReview.php의 form 태그 부분에 enctype= "multipart/form-data" 이것을 추가해줍니다.

<section>
        <div class="mainCon">
            <div class="writeTitle">리뷰 쓰기</div>
            <form class="writeForm" action="board_process.php?mode=write" method="post" enctype= "multipart/form-data">
                <input type="hidden" name="id" value="review">
                <input type="hidden" name="userid" value="<?= $_SESSION['userid'] ?>">
                <input type="hidden" name="name" value="<?= $_SESSION['name'] ?>">
                <p><input class="writeTypeText" type="text" name="title" size="50" placeholder="제목을 입력해주세요" required></p>
                <textarea class="writeTextarea" name="story" placeholder="본문을 입력해주세요"  required></textarea>
                <input type="file" name="image">
                <div class="writeBtn">
                <input type="submit" value="작성">&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="button" value="취소" onclick="history.back(1)">
                </div>
            </form>
        </div>
    </section>

그리고 작성 버튼 위에 파일을 추가할 수 있는 인풋 타임 파일을 추가해줍니다. 

name 값은 image로 주었습니다.

 

먼저 DB에서 review 테이블에 새 콜롬을 추가해줍시다.

이렇게 image 콜롬을 새로 추가해줍니다.

 

 

그리고 board_process.php 파일로 가서

case 'write':
            if(!$_SESSION['userid']){
                errMsg("로그인 해주세요");
            }

            $id = $_POST['id'];
            $userid = $_POST['userid'];
            $name = $_POST['name'];
            $title = $_POST['title'];
            $story = $_POST['story'];


             if($_FILES['image']['name']){
               $imageFullName = strtolower($_FILES['image']['name']);
               $imageNameSlice = explode(".",$imageFullName);
               $imageName = $imageNameSlice[0];
               $imageType = $imageNameSlice[1];
               $image_ext = array('jpg','jpeg','gif','png');
               if(array_search($imageType,$image_ext) === false){
                   errMsg('jpg, jpeg, gif, png 확장자만 가능합니다.');
               }
               $dates = date("mdhis",time());
               $newImage = chr(rand(97,122)).chr(rand(97,122)).$dates.rand(1,9).".".$imageType;
               $dir = "image/";
               move_uploaded_file($_FILES['image']['tmp_name'],$dir.$newImage);
               chmod($dir.$newImage,0777);
            }

            $sql = $db -> prepare("INSERT INTO review
            (id, userid, name, title, story, redate,image)
            VALUE
            (:id, :userid, :name, :title, :story, now(),:image)");

            $sql -> bindParam("id", $id);
            $sql -> bindParam("userid",$userid);
            $sql -> bindParam("name",$name);
            $sql -> bindParam("title",$title);
            $sql -> bindParam("story",$story);
            $sql -> bindParam("image",$newImage);

            $sql -> execute();
            header("location:review.php");
        break;

저렇게 코드를 추가해줍니다.

$_FILES['image']['name'] 여기서 앞에 칸에는 writeReview.php에서 보내는 name 값인 image를 입력해주셔야합니다.

 

$imageFullName = strtolower($_FILES['image']['name']);

imageFullName 변수에 파일 이름을 소문자로 바꿔 저장시킵니다. strtolower은 소문자로 변환시키는 함수입니다.

$imageNameSlice = explode(".",$imageFullName);

imageNameSlice 변수에는 이미지 파일의 이름을 "."을 기준으로 나누어 배열로 저장합니다.

예를 들어 파일 이름이 qmbgjiq.jpg라면 qmbgjiq와 jpg가 각각 따로 배열에 저장됩니다.

 

$imageName = $imageNameSlice[0];
$imageType = $imageNameSlice[1];

이 부분은 현재 Slice 배열의 index 0에는 이름이, index 1에는 확장자가 들어있어 각각 저렇게 변수에 저장시킵니다.

 

$image_ext = array('jpg','jpeg','gif','png');

이 부분은 사용 가능한 확장자를 배열로 만들어 넣어줍니다.

if(array_search($imageType,$image_ext) === false){
        errMsg('jpg, jpeg, gif, png 확장자만 가능합니다.');
}

이 부분에서 배열에 없는 확장자 이미지 파일을 업로드하면 에러 메세지를 띄웁니다.

$dates = date("mdhis",time());

시간을 월, 일, 시, 분, 초 순서로 만들어 줍니다.

$newImage = chr(rand(97,122)).chr(rand(97,122)).$dates.rand(1,9).".".$imageType;

chr 함수는 ASCll코드값에 해당되믄 문자를 반환 하는 함수입니다.

rand 함수는 랜덤하게 숫자를 생성해주는 함수입니다.

이 두 함수를 사용해 이미지 파일의 이름을 새로 만들어줍니다.

$dir = "image/";

이 부분은 업로드한 이미지 파일을 저장할 폴더로 board 폴더 안에 image 폴더를 만들어줍시다.

move_uploaded_file($_FILES['image']['tmp_name'],$dir.$newImage);

업로드 된 파일을 image 폴더로 옮겨줍니다.

chmod($dir.$newImage,0777);

다이렉토리에 모든 권한을 줍니다.

 

이제 글을 작성해 제대로 저장되는지 확인해봅시다.

 

 

리뷰 목록에도 제대로 뜨고, 이미지도 폴더에 저장된 것을 확인할 수 있습니다.

 

리뷰를 볼 때 사진이 있으면 사진이 보이게 viewReview.php에도 코드를 추가해줍시다.

 

<section>
        <div class="mainCon">
            <div class="viewTitle"><?= $review['title'] ?></div>
            <div class="viewInfo">
                <div class="viewName"><?= $review['name']?></div>
                <div class="viewTime"><?= $time?></div>
            </div>
            <div class="viewStory">
                <?= $review['story']?>
                <?php 
                    if(!$review['image']){

                    } else{
                        echo "<br><img src='image/$review[image]'></img>";
                    }
                ?>
            </div>
            <div class="viewBtn">
                <a href="review.php">목록으로</a>
            </div>
        </div>
    </section>

위와 같이 if문을 추가해줬습니다.

 

그리고 css 파일에 저 코드를 추가했습니다.

.viewStory img{
    margin-top: 20px;
    width: 80%;
}

이렇게 했을 때 결과로

 

정상적으로 출력되는 것을 볼 수 있습니다.

 

 

사진 올리기는 이것으로 마치겠습니다.

 

# Visual Studio Code, Xampp, MySQL Workbench 환경에서 작성된 코드입니다.