-
[PHP] 이미지 갤러리 만들기 ( DB X, 페이징 X, 썸네일 X)PHP 2024. 2. 22. 16:34
이번엔 이전에 공부했던 dir, file 을 이용하여 이미지 갤러리를 만들어보겠습니다
우선 main 화면인 menu.html 을 생성하겠습니다.
<style>.menu{margin-bottom: 10px;}</style><div class="menu"><a href="gallery_upload_form.php">파일 업로드</a><a href="gallery_list.php">갤러리 목록</a></div>그 후 gallery_upload_form.php 를 만들어 이미지 파일을 업로드 할 form 을 생성하겠습니다.
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>이미지 업로드</title><script src="upload.js"></script></head><body><?php include 'menu.html'; ?>
<form method="post" action="ok.php" name="upload_form" enctype="multipart/form-data">이미지 업로드 : <input type="file" name="photo"/><button id = "upload_btn">업로드 확인</button>
</form></body></html>그 후 post 액션을 처리할 ok.php 를 만들겠습니다.
<?phpinclude 'menu.html';
if($_FILES['photo']['name'] =='' ){echo "<script>alert('파일을 선택하지 않으셨습니다.');self.location.href='./gallery_upload_form.php';</script>";exit;}
$file_name = $_FILES['photo']['name'];$arr = explode('.',$file_name);$ext = end($arr);
if($ext == 'jpg' || $ext == 'png' || $ext == 'PNG'||$ext == 'JPG'){copy($_FILES['photo']['tmp_name'],"./upload/".$_FILES['photo']['name']);
echo "<script>alert(' 정상적으로 업로드가 완료되었습니다.');self.location.href='./gallery_list.php';</script>";exit;
} else{echo "이미지 포맷 (png,jpg) 만 업로드 가능합니다.";}이렇게 생성 후 이제 ok.php 에서 button 이 취할 이벤트를 생성하기위해 upload.js 를 생성해보겠습니다.
document.addEventListener("DOMContentLoaded",()=>{const btn = document.querySelector("#upload_btn")btn.addEventListener("click",(event) => {event.preventDefault()const f = document.upload_formif(f.photo.value == ''){alert('파일을 첨부해주세요.')return false}f.submit()})
})그 후 업로드한 이미지 파일들을 출력할 gallery_list.php 를 생성해보겠습니다.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>갤러리</title></head><body><?php include 'menu.html';?><div class="wrapper"><?php$d = dir("./upload");while($file = $d->read()){if($file == '.' || $file =='..'){continue;}$arr = explode('.',$file);$ext = end($arr);if($ext == 'jpg'|| $ext == 'JPG' || $ext == 'png' || $ext == 'PNG'){echo '<div class = "img_div"><img src ="upload/'.$file.'" width="100"></div>';}}?>
</div></body></html>이렇게 완성 후 해당 URL 에 접속하여 확인한 결과입니다.
jpg,png 외 파일 업로드할 경우
파일을 선택하지하고 업로드 할 경우
정상적으로 업로드가 수행 될 경우
정상적인 업로드 수행 후 갤러리 이동 결과
'PHP' 카테고리의 다른 글
[PHP] Session (0) 2024.02.22 [PHP] cookie 생성, 확인, 삭제 (0) 2024.02.22 [PHP] 디렉토리 내 파일 출력 (0) 2024.02.21 [PHP] 파일 확장자 찾는 함수 만들기 (0) 2024.02.21 [PHP] 파일 읽기, 쓰기 , 열기 , 닫기 (0) 2024.02.21