고정 헤더 영역
상세 컨텐츠
본문
728x90
이런 페이지에 jpg, png 파일을 업로드하여 갤러리에 가면
업로드한 파일이 보이도록 하는 간단한 갤러리
단 파일 선택을 하지 않고 업로드 할 수 없고 jpg, png가 아니면 업로드 불가
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
<!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>
<!-- menu.html 을 가져옴 -->
<?php include 'menu.html'; ?>
<!-- 데이터를 전송하니 post, enctype="multipart/form-data"를 사용하고 이 폼은 gallery_upload_form_ok.php 로 넘어갈 것임 -->
<form method="post" name="upload_form" enctype="multipart/form-data" action="gallery_upload_form_ok.php">
이미지 업로드 : <input type="file" name="photo">
<button id="upload_btn">업로드 확인</button>
</form>
</body>
</html>
gallery_upload_form_ok.php
<?php
include 'menu.html';
// 업로드한 파일의 size가 0이면 작동 업로드 페이지로 돌아감
if($_FILES['photo']['size'] == 0) {
echo "
<script>
alert('파일을 선택하지 않았습니다.');
self.location.href='./gallery_upload_form.php';
</script>";
exit;
}
print_r($_FILES);
// 넘어온 파일의 name을 배열화 시켜 배열의 마지막 부분을 이용할 것 (확장자가 .jpg, .png)
$file_name = $_FILES['photo']['name'];
$arr = explode('.', $file_name); // .을 기준으로 배열을 나누니 배열의 마지막은 반드시 jpg, png 일 것 (실제론 jpeg 등 많을 수 있다)
$ext = end($arr);
// ext가 .jpg, png 가 맞다면 작동
if($ext == 'jpg' or $ext == 'png' or $ext == 'PNG' or $ext == 'JPG') {
copy($_FILES['photo']['tmp_name'], "./upload/". $_FILES['photo']['name']);
echo "
<script>
alert('정상적으로 업로드 되었습니다.');
self.location.href='./gallery_list.php';
</script>";
exit;
} else {
// 뭐 .zip, .exe 같은 이상한 파일이 올라오면 작동
echo "이미지(png, jpg)만 업로드 가능합니다";
}
?>
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 == '.' or $file == '..') {
continue;
}
$arr = explode('.', $file);
$ext = end($arr);
if(in_array(strtolower($ext), ['jpg', 'png'])) {
echo '
<div class = "img_div">
<img src = "upload/'.$file.'"width="100">
</div>
';
}
}
?>
</div>
</body>
</html>
upload.js
// file_upload_form에서 upload_btn 버튼이 눌리면 작동
/*
웹페이지와 상호작용을 하기 위한 document를 사용
DOMContentLoaded 을 사용하기 위해 addEventListener 를 사용하는데
DOMContentLoaded 를 사용하면 페이지를 다시 띄우지는 것을 방지하여 사용자가 더 쾌적하다..
DOMContentLoaded, () => {} 콜백함수를 사용하기 위함
*/
document.addEventListener("DOMContentLoaded", () => {
// upload_btn 이라는 id 를 가진 요소를 btn에 할당 (upload_btn 을 가져오려면 querySelector를 사용해야함)
const btn = document.querySelector("#upload_btn")
// btn 이 클릭 되면 작동됨
btn.addEventListener("click", (event) => {
event.preventDefault()
// f = upload_form 이름을 가진 폼을 할당받음
const f = document.upload_form
// f의 이름이 없으면 작동
if(f.photo.value == '') {
alert ('파일을 첨부해 주세요.')
return false
}
f.submit()
})
})
'php' 카테고리의 다른 글
| Excel 내용 DB에 저장 (0) | 2024.03.25 |
|---|---|
| 쿠키 생성 (1) | 2024.03.22 |
| PHP $_GET, $_POST (0) | 2024.03.21 |
| PHP $_SERVER (0) | 2024.03.21 |
| PHP 슈퍼전역 $GLOBALS (0) | 2024.03.21 |
