코딩독학) PHP 다중 파일(사진 여러 개) 업로드 (+ 디렉토리에 저장하고 MY SQL에 올리기)

인스타그램에 보면 사진을 여러 개 올리면 그 사진 여러 개가 화면에 표시가 된다.
모바일은 아니지만 웹에서 이걸 만들어보려고 하는데 매우 간단한 거였지만 한참 헤맸다. 나같이 헤매고 계실 분들을 위해 정리해서 글을 올려보려고 한다.

먼저, 파일을 올리는 페이지에 파일 인풋 태그에 이름에 "[]" 배열기호를 뒤에 넣어주고 다중 파일을 선택할 수 있도록 multiple을 넣어준다.

#HTML

<input type="file" name="photo[]" accept="image/*" multiple />
<input type="submit" value="제출" />

그런 다음 submit 이후 넘어가는 자료를 처리해줄 php파일에 아래 코드를 작성한다.

#PHP

<?php
mkdir ("./upload",0777);

$photo = $_FILES['photo'];

$uploadDir = "./upload/";
$fileName = $photo['name'];
$tmpName = $photo['tmp_name'];

$fileNames = array();

for($i=0; $i<count($fileName); $i++){
   move_uploaded_file($tmpName[$i], $uploadDir.$fileName[$i]); // 디렉토리에 저장하기
   array_push($fileNames, $fileName[$i]); // 가공해서 배열에 넣기
   $arrayString = implode(",", $fileNames); // 배열을 문자열로 만들기
}

$query = "insert into mysql(photo) values ('$arrayString')";
mysqli_query($connect,$query);
?>

mkdir는 업로드한 파일을 저장시키는 폴더를 생성시키는 용도로 이미 폴더가 있다면 만들지 않아도 된다.

 

여러 개의 파일을 input 파일로 넘길 경우 파일이 배열로 넘어오는데, 요걸 잘 가공해서 디렉토리에 저장해주고 Mysql에 보내주면 된다. 배열을 가공하지 않고 Mysql에 보내면 배열 형태로 저장되는 것이 아니라 Array라는 문자열로 저장되어서 이미지 주소를 가져올 수가 없다. 그래서 implode를 이용해 배열 그 자체를 문자열로 만들어주고 파일을 콤마로 구분한다. 그래서 저장할 파일명에 콤마가 들어있을 경우 예기치 못한 에러가 발생할 수 있으므로 주의하자.

 

그런 다음 이미지를 표시해 줄 페이지에서 문자열로 변환된 배열을 다시 가공해서 화면에 출력해준다.

<?php
   $query = "select * from mysql";
   $result = mysqli_query($connect,$query);
   while($row = mysqli_fetch_array($result)){
      $photoArr = explode(",",$row['photo']);
      for($i=0; $i<count($photoArr); $i++){
         echo "
         <img src='./upload/{$photoArr[$i]}' alt='img' />";
      }
   }
?>

explode는 implode로 변환된 배열을 원래대로 다시 돌려준다.

 

아직 배울 게 많은 코딩 초보라서 여러가지 예외 사항들을 다 처리하긴 어렵고 부족한 점이 많은 코드입니다.

참고만 부탁드립니다^^