-
(기능추가5-1) 업로드, 로드기능 구현하기프로젝트/프로젝트_사진첩 2023. 9. 5. 00:24
-전체소스코드
<?php$conn=mysqli_connect("localhost:81","root","password","project_memories");
?>
<!DOCTYPE html><html lang="ko">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Memories</title><link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet"><link href="style.css" rel="stylesheet"><script>function autoSubmit() {var form = document.getElementById('uploadForm');form.submit();}</script></head>
<body><div class="layout"><div class="titleBox"><div class="titleName">Memories</div><form id="uploadForm" action="" method="POST" enctype="multipart/form-data"><input type="hidden" name="upload" value="1"> //값이 있어야 $_POST['upload']가 true가 됨<label class="uploadBotton" for="uploadInput">+</label><input type="file" id="uploadInput" style="display:none" name="image" onchange="autoSubmit()"></form></div><?phpif(isset($_POST['upload'])) {$file = addslashes(file_get_contents($_FILES["image"]["tmp_name"]));$sql = "insert into image (image,created) values ('$file',NOW())";if(mysqli_query($conn, $sql)){echo '<script type="text/javascript"> alert("헤헤 고맙따!"); </script>';}else{echo '<script type="text/javascript"> alert("밍..실패했어오!"); </script>';}}?>
<?php$sql = "select * from image";$result = mysqli_query($conn, $sql);?>
<div id="photoLayout" class="photoLayout"><?phpwhile($row = mysqli_fetch_array($result)){echo '<div class="photo"><img class="img" src="data:image;base64,'.base64_encode($row['image']).'" alt="Image"></div>';}?></div><!-- <script>window.onscroll = function() {if((window.innerHeight + Math.ceil(window.scrollY))>= document.body.offsetHeight) {let Newphoto = document.createElement('div');Newphoto.classList.add('photo');document.getElementById('photoLayout').appendChild(Newphoto);}}</script> --></body></html>문제1>
input type=submit버튼을 따로 넣기 싫었음(디자인상 불필요하다고 생각)
해결>
input type=file 에서 onchange속성(값이 변화할때 js코드를 실행하는 함수)를 추가하여 파일이 추가됬을때 자동으로 submit되도록 하는 함수를 작성함.
문제2>
img파일이 아니면 업로드가 거부되게하는 코드가 필요함
해결>
-
느낀점>
사실 다른 페이지에 가져온 코드들 긁어온거라 따로 공부가 필요함.<form id="uploadForm" action="" method="POST" enctype="multipart/form-data">$file = addslashes(file_get_contents($_FILES["image"]["tmp_name"]));echo '<div class="photo"><img class="img" src="data:image;base64,'.base64_encode($row['image']).'" alt="Image"></div>';따로 공부해서 여기다가 올릴것.
1.enctype="multipart/form-data" 속성
모든 문자를 인코딩하지 않음을 명시함.
이 방식은 <form> 요소가 파일이나 이미지를 서버로 전송할 때 주로 사용함.
2.addslashes()
작은 따옴표, 큰 따옴표, 백슬래시 앞에 백슬래시를 추가한다.
즉, PHP 'PHP' "PHP"를
PHP \'PHP\' \"PHP\"로 변경한다.
이는 sql문에서 따옴표가 존재하는경우 실행이 안될경우를 대비해서 넣는 함수이다
3.$_FILES['name값']['tmp_name']
$_FILES는 초전역변수, name값은 인풋태그에서 받아오는것, tmp_name은 웹서버에 임시로 저장된 파일의 위치를 가리킴.
4.file_get_contents()
파일을 문자열로 읽어들이는 PHP 함수.
=>mysql에 BLOB형태로 입력하기 위해서'프로젝트 > 프로젝트_사진첩' 카테고리의 다른 글
(기능추가4-2) 상세페이지 내용 DB에서 불러오기 (0) 2023.09.09 (기능추가4-1)상세팝업 레이아웃 구현하기 (0) 2023.09.06 (기능추가 3-2) 무한스크롤 적용하기 (0) 2023.08.22 (기능추가3-1) 무한스크롤 구현하기 (0) 2023.08.21 (기능추가2) grid와 fixed를 이용한 상단바 꾸미기 (0) 2023.08.19