[PHP, HTML] 게시글에 이미지 파일 넣기

https://www.delftstack.com/ko/howto/php/how-to-create-a-folder-if-it-does-not-exist-in-php/

PHP에 폴더가없는 경우 폴더를 만드는 방법

위 포스트를 참조했습니다.

 

한빛소프트의 PHP 프로그래밍 입문을 보고 공부중이다.

 

폴더가 없을 경우에 생성이 되질 않아서 위 포스트를 보고 폴더 생성 구문을 추가했다.

 

게시글을 작성할 때 이미지 파일을 넣고 작성한 글을 볼 때 넣은 이미지파일이 보이게 하는 것을 실습해봤다.

 

일단 첨부파일을 넣는 란을 만드는 방법은 다음과 같다.

 

<div class="clear"></div>
<div id="write_row4">
    <div class="col1">이미지파일1</div>
    <div class="col2"><input type="file" name="upfile[]"></div>
</div>
<div class="clear"></div>
<?
    if($mode == "modify" && $item_file_0)
    {
?>
<div class="delete_ok"><?=$item_file_0?> 파일이 등록되어 있음 
        <input type="checkbox" name="del_file[]" value="0">삭제
</div>
<div class="clear"></div>
<? } ?>
<div class="write_line"></div>
<div class="clear"></div>
<div id="write_row5">
    <div class="col1">이미지파일2</div>
    <div class="col2"><input type="file" name="upfile[]"></div>
</div>
<div class="clear"></div>
<?
    if($mode == "modify" && $item_file_1)
    {
?>
<div class="delete_ok"><?=$item_file_1?> 파일이 등록되어 있음 
        <input type="checkbox" name="del_file[]" value="1">삭제
</div>
<div class="clear"></div>
<? } ?>
<div class="write_line"></div>
<div class="clear"></div>
<div id="write_row6">
    <div class="col1">이미지파일3</div>
    <div class="col2"><input type="file" name="upfile[]"></div>
</div>
<div class="clear"></div>
<?
    if($mode == "modify" && $item_file_2)
    {
?>
<div class="delete_ok"><?=$item_file_2?> 파일이 등록되어 있음 
        <input type="checkbox" name="del_file[]" value="2">삭제
</div>
<div class="clear"></div>
<? } ?>

div id와 class는 css를 위한 id값이니 신경쓰지말자

 

"이미지파일"이라고 작성한 단락 밑에 input을 추가하는 코드만 보자면

input type을 file로하면 첨부파일을 컴퓨터에서 찾는 란이 생성된다.

그리고 name속성을 upfile[] 로하면 다음과 같이 자동으로 배열 변수가 생성되어 전달된다.

배열	설명
$_FILES["upfile"]["name"]	업로드하는 파일의 실제 이름
$_FILES["upfile"]["tmp_name"]	서버에 저장되는 임시 파일 이름
$_FILES["upfile"]["type"]	업로드 파일의 형식
$_FILES["upfile"]["size"]	업로드 파일의 크기
$_FILES["upfile"]["error"]	에러 발생시 확인가능한 Bool

 

if(mode == "modify") 는 게시글 수정할 때 보이도록 따로 지정했다.

 

그리고 게시글 작성 버튼을 눌렀을 때 게시글과 사진이 저장되도록 insert.php를 따로 만들어 하이퍼링크로 거치도록 한다면 insert.php에서 다음과 같이 작성할 수 있다.

 

$regist_day = date("Y-m-d (H:i)");
$files = $_FILES["upfile"];
$count = count($files["name"]);
$upload_dir = './data/';
if(!file_exists($upload_dir))
    mkdir($upload_dir, 0777);
for($i = 0; $i < $count; $i++)
{
    $upfile_name[$i] = $files["name"][$i];
    $upfile_tmp_name[$i] = $files["tmp_name"][$i];
    $upfile_type[$i] = $files["type"][$i];
    $upfile_size[$i] = $files["size"][$i];
    $upfile_error[$i] = $files["error"][$i];
    $file = explode(".", $upfile_name[$i]);
    $file_name= $file[0];
    $file_ext = $file[1];
    if(!$upfile_error[$i])
    {
        $new_file_name = date("Y_m_d_H_i_s");
        $new_file_name = $new_file_name."_".$i;
        $copied_file_name[$i]=$new_file_name.".".$file_ext;
        $uploaded_file[$i] = $upload_dir.$copied_file_name[$i];
        move_uploaded_file($upfile_tmp_name[$i], $uploaded_file[$i]);
    }
}

먼저

$upload_dir = './data/';
if(!file_exists($upload_dir))
    mkdir($upload_dir, 0777);

이 코드로 이미지 파일을 저장할 폴더가 있는지 확인한다.

insert.php 스크립트가 있는 폴더 위치에 data란 폴더를 생성한다.

mkdir의 두번째 인자인 0777은 누구나 읽고 쓸수 있다는 플래그라 보면 된다.

 

$files에 $_FILES["upfile"] 을 넣고 count를 하여 업로드하려는 파일의 개수를 얻는다.

 

그리고 다음 코드로 파일의 정보들을 얻는다.

$upfile_name[$i] = $files["name"][$i];
$upfile_tmp_name[$i] = $files["tmp_name"][$i];
$upfile_type[$i] = $files["type"][$i];
$upfile_size[$i] = $files["size"][$i];
$upfile_error[$i] = $files["error"][$i];

 

만약 type이 이미지 파일이 아닐경우 size가 너무 클 경우 if문을 걸어서 insert를 거부할 수 있다.

 

if(!$upfile_error[$i])
{
    $new_file_name = date("Y_m_d_H_i_s");
    $new_file_name = $new_file_name."_".$i;
    $copied_file_name[$i]=$new_file_name.".".$file_ext;
    $uploaded_file[$i] = $upload_dir.$copied_file_name[$i];

    move_uploaded_file($upfile_tmp_name[$i], $uploaded_file[$i]);
}

 

그리고 만약 에러가 없다면 업로드하는 시간으로 이름을 바꾸고 explode로 확장자를 분리했는데 이름 뒤에 확장자를 붙인다.

 

그리고 move_uploaded_file 함수로 파일을 저장한다.

첫 번째 인자는 업로드하려는 파일이고 두번째 인자는 저장할 폴더 위치와 저장할 파일 이름이다.

 

이렇게 물리적으로 저장하고

 

sql 쿼리문으로 db에도 이미지 정보들을 저장하자.

다음 코드는 책을 따라한 코드니 자신의 mysql db에 insert 하는 쿼리를 따로 작성하자.

$sql="insert into $table (id, name, nick, subject, content, regist_day, hit, is_html, file_name_0, file_name_1, file_name_2, 
file_copied_0, file_copied_1, file_copied_2) values('$userid', '$username', '$usernick', '$subject', '$content', '$regist_day', 0, '$is_html', 
'$upfile_name[0]', '$upfile_name[1]', '$upfile_name[2]', '$copied_file_name[0]', '$copied_file_name[1]', '$copied_file_name[2]')";

mysqli_query($connect, $sql);

 

그리고 게시글 목록으로 돌아와 게시글을 볼 때 view.php를 사용한다면

대충 다음과 같이 코드를 작성할 수 있다.

 

    $sql = "select * from $table where num = $num";
    $result = mysqli_query($connect, $sql);
    $row = mysqli_fetch_array($result);

    $item_num = $row['num'];
    $item_id = $row['id'];
    $item_name=$row['name'];
    $item_nick=$row['nick'];
    $item_hit = $row['hit'];

    $image_name[0] = $row['file_name_0'];
    $image_name[1] = $row['file_name_1'];
    $image_name[2] = $row['file_name_2'];

    $image_copied[0] = $row['file_copied_0'];
    $image_copied[1] = $row['file_copied_1'];
    $image_copied[2] = $row['file_copied_2'];

    $item_date = $row['regist_day'];
    $item_subject = str_replace(" ", " ", $row['subject']);
    $item_content = $row['content'];
    $is_html = $row['is_html'];
    
        for($i = 0; $i<3; $i++)
    {
        if($image_copied[$i])
        {
            $imageinfo = GetImageSize("./data/".$image_copied[$i]);
            $image_width[$i] = $imageinfo[0];
            $image_height[$i] = $imageinfo[1];
            $image_type[$i] = $imageinfo[2];

            if($image_width[$i] > 785)
            {
                $image_width = 785;
            }
        }
        else
        {
            $image_width[$i] = "";
            $image_height[$i] = "";
            $image_type[$i] = "";
        }
    }

mysql db에 저장한 파일 이름을 for문으로 data폴더에서 찾아내서 정보를 얻고 이미지가 게시글을 넘어가지 않도록 넓이를 조정한다.

 

그리고 게시글을 보이게하는 content 구역에서 data 폴더에 있는 이미지를 조정한 넓이대로 보이게 하면 된다.

<div id="view_content">
    <?
        for($i = 0; $i < 3; $i++)
        {
            if($image_copied[$i])
            {
                $img_name = $image_copied[$i];
                $img_name = "./data/".$img_name;
                $img_width = $image_width[$i];
                echo "<img src='$img_name' widht='$img_width'>"."<br><br>";
            }
        }
        $item_content;
    ?>
</div>