회원사진 업로드시 미리보기 또는 바로 저장방법은 어떻게 해야하나요?

랑기랑기 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023.02.19 13:47:02 1109 (184.♡.♡.3)

답변 3

본문

그누보드 회원사진의 경우 업로드시 파일명만 기재되고 따로 저장버튼을 클릭해야 업로드가 되는데요

혹시 이걸 업로드시 미리보기와 함께 자동저장하려면 어떤방법으로 사용해야할까요?

#그누보드5

답변 3

블랙캣77 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-02-19 23:49:36 121.♡.♡.209

ajax 파일업로드 플러그인이 있습니다. 한번 알아보시고 파일 선택하고 나서 해당을 실행해서 파일만 미리 저장하시면 될거 같습니다.

배르만 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-02-20 00:05:50 119.♡.♡.81


<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
        #preview {
            background-color: #eee;
            height: 10em;
            margin: 1em 0;
        }
        #preview img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        </style>
        <script>
        document.addEventListener('DOMContentLoaded', function () {
            const preview = document.getElementById('preview');
            const attach = document.getElementById('attach');
            const submit_ajax = document.getElementById('submit_ajax');
 
            // preview
            attach.addEventListener('change', function (evt) {
                const [file] = this.files;
                const url = URL.createObjectURL(file);
                preview.innerHTML = '<img src="' + url + '" />';
            });
 
            // upload
            submit_ajax.addEventListener('click', function (evt) {
                const [file] = attach.files;
                if (file != null) {
                    const action = location.pathname; // https://domain.com/path/file.php
                    const formData = new FormData();
                    formData.set('attach', file, file.name);
                    fetch(action, {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.text())
                    .then(data => {
                        alert('upload complete');
                    });
                }
            });
        }, false);
        </script>
    </head>
    <body>
        <div id="preview"></div>
        
        <input type="file" accept="image/*" name="attach" id="attach" />
        <button type="button" id="submit_ajax">Ajax submit</button>
    </body>
</html>