본문 바로가기
PHP

[PHP] 웹 프로필 이미지 업로드

by teamnova 2021. 5. 17.

안녕하세요.~

 

이번시간에는 웹 환경에서 PHP를 이용해  이미지 업로드를 해보도록 하겠습니다.

 

스틱코드 (stickode.com/mainlogin.html)

 

이번에도 역시 빠르게 만들기 위해 스틱코드 플러그인을 사용해서 만들어보겠습니다.

 

스틱코드는 자주쓰는 코드를 저장해서 쉽고 빠르게 사용할 수 있고,

다른사람들의 코드도 즐겨찾기를 통해 쉽게 내코드로 등록하여 사용할 수 있어 사용하는 사람이 늘어나고, 

좋은 코드가 쌓일수록 강력해지는 플러그인 입니다.

 

웹 환경은 우분투에 아파치 서버를 사용했습니다. 

 

참고) 아파치 서버에서는 PHP 서버에 쓰기 권한이 없기 때문에 root경로에서 이미지를 저장하는 경로까지 

권한을 풀어줘야합니다.

chmod 777 /경로  --> 통해 권한을 풀어주었습니다.

HTML 파일 설정 (레이아웃)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <!-- CSS 호출 -->
    <link rel="stylesheet" type="text/css" href="/html/img_save_test.css">
    
</head>
<body>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-center" id="staticBackdropLabel">프로필 이미지 설정</h5>
            </div>
            <div class="modal-body text-center">
                <button type="button" class="close close_modal" id="close_modal_btn2" style="display: none;">
                    <span aria-hidden="true">&times;</span>
                </button>
                <img id="backImg" src="/upload/unnamed.jpg" alt="profile" width="214" height="214">
                <div class="back">
                     <img id="frontImg" src="/upload/plus.png" alt="profile" width="126" height="126">
                     <form action="/html/img_save_test.php" id="save_img_form" method="POST" enctype="multipart/form-data">
                        <input class="inputfile" accept=".jpg, .jpeg, .png" style="display: none;" type="file" value="1" name="a_file">
                    </form>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn--primary" id="modal_okay_btn">저장</button>
            </div>
        </div>
    </div>

    <!--js파일 호출 -->
    <script type="text/javascript" src="/html/img_save_test.js"></script>
    
</body>
</html>

테스트 진행을위 해 다음과 같이 프론트를 구성해 보았습니다.

+ 이미지 버튼을 누르면 사진을 첨부 할 수 있고, 

 

저장 버튼을 누르면 이미지 가 업로드 되도록 해보겠습니다.

 

자 이제 링크가 걸린 자바스크립트 파일 (img_save_test.js) 에서 이미지를 전송하는 코드를 작성해보도록 하겠습니다.

 

클라이언트 (자바스크립트) 

 

스틱코드를 통해

js 이미지 전송 코드를 설정해주도록 하겠습니다.

바로 완성된 코드를 확인하실 수 있습니다.

다음과 같이 코드가 완성되었고, 엘리먼트 ID는 각자에 맞춰 변경해서 사용하시면 됩니다.

 

javascript 전문입니다.

// 이미지 수정 플러스 이미지
const frontImg = document.getElementById("frontImg");
// 파일 업로드 인풋태그
const inputfile = document.querySelector(".inputfile");
// 저장 버튼 
const modal_okay_btn = document.getElementById("modal_okay_btn");
// 이미지 업로드 폼태그
const save_img_form = document.getElementById("save_img_form");

//이미지 플러스 클릭
frontImg.onclick = () => {
    inputfile.click();
}

// 파일 업로드 인풋 이벤트 리스너
inputfile.addEventListener('change', updateImageDisplay);

// 저장버튼 클릭 
modal_okay_btn.onclick = () => {
    let checkfile = inputfile.files;
    //또는 이전 사진과 같다면 조건하나 추가해야함
    if (checkfile.length === 0) {
        alert("업로드할 이미지 없음")
    } else {
        save_img_form.submit()
    }
}

// 이미지 타입 변수
const fileTypes = [
    'image/jpeg',
    'image/pjpeg',
    'image/png'
];

// 첨부한 이미지 적용 함수
function updateImageDisplay() {
    const curFiles = inputfile.files;
    if (curFiles.length === 0) {
        console.log("선택된 파일 없음.");
    } else {
        for (const file of curFiles) {
            if (fileTypes.includes(file.type)) {
                backImg.src = URL.createObjectURL(file);
            } else {
                console.log("잘못된 파일형식");
            }
        }
    }
}

플러스 이미지 버튼을 누르면 이미지 첨부 를 할 수 있고,

이미지 첨부가 완료되면 이미지가 updateImageDisplay 함수를 통해 첨부한 이미지가 보여집니다.

저장 버튼을 클릭하면 

form 태그의 정보가 action 경로로 전송됩니다.

따라서 input 태그에 담긴 이미지가 서버로 전송되고, 

이제 이미지를 서버에 업로드하면 끝이납니다.

 

PHP 이미지 업로드

이미지 업로드 코드도 스틱코드를 통해 

단 번에 설정해주도록 하겠습니다.

다음과 같이 코드가 완성된 것을 확인할 수 있습니다.

이미지는 html의 input 태그의 name="a_file" 변수로 전달이 됩니다.

이미지를 move_uploaded_file 이라는 PHP 함수를 통해 서버에 업로드 시켰습니다.

 

결과 화면 

현재 이미지 경로에 저장된 이미지가 없고, 

이미지가 잘 올라간 것을 확인했습니다.

 

잘동작하네요~

 

이렇게 스틱코드를 사용해 프로필 이미지 업로드를 구현해보았습니다.

 

 

이 예제에서 사용된 스틱코드

출처 : stickode.com/detail.html?no=2119 - Javascript 이미지 전송 (Form 태그)

출처 : stickode.com/detail.html?no=2118 - PHP 이미지 업로드

 

감사합니다.

'PHP' 카테고리의 다른 글

[PHP] 클라이언트에 DB 데이터를 json 객체로 응답 보내기  (0) 2021.08.09
[PHP] JWT 구현하기  (2) 2021.07.24
[PHP] 썸네일 처리 빠르게 구현하기  (0) 2021.05.16
[PHP] PDO DB 커넥션 빠르게 구현하기  (0) 2021.05.04
[PHP] 네이버 단축 url 빠르게 만들기  (0) 2021.04.23

관련글

티스토리툴바