프로필, 아바타 이미지 업로드 (+미리보기) 코드 및 CSS 참조

plugins.krajee.com/file-avatar-upload-demo

Bootstrap File Input Avatar Upload Demo - © Kartik

 

 

codepen.io/shantikumarsingh/pen/RRmWxo

Profile Image Upload Jquery

 

응용

<!-- jQuery -->
<script src="/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css">

<style>
    .round{
        border-radius: 10px !important;
        -moz-border-radius: 10px !important;
        -khtml-border-radius: 10px !important;
        -webkit-border-radius: 10px !important;
    }

    .photo {
        display: inline-block;
        vertical-align: middle;
        border: 1px solid #d4d4d4;
        margin: 0;
        text-align: center;

        background-size: 80px;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: #ECEFF1;
        width:80px;
        height:80px;
        margin:0 auto 20px;
        position:relative;
    }

    .icon_camera {
        position:absolute;
        bottom: -2px;
        right: -5px;
        min-width: 8px;
        height: 22px;
        line-height: 20px;
        margin-top: -11px;
        padding: 0 6px;
        font-weight: normal;
        font-size: 15px;
        color: white;
        text-align: center;
        text-shadow: 0 1px rgba(0, 0, 0, 0.2);
        background: #e23442;
        border: 1px solid #911f28;
        border-radius: 11px;
        background-image: -webkit-linear-gradient(top, #e8616c, #dd202f);
        background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
        background-image: -o-linear-gradient(top, #e8616c, #dd202f);
        background-image: linear-gradient(to bottom, #e8616c, #dd202f);
        -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
        box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
    }


    /* 이미지 */
    .profile-pic {
        max-width: 200px;
        max-height: 200px;
        display: block;
    }

    .file-upload {
        display: none;
    }

    .upload-button {
        font-size: 1.2em;
    }

    /*
    .upload-button:hover {
        transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
        color: #999;
    }
    */
</style>


<form name="frm" id="frm" method="post" enctype="multipart/form-data">

    <div class="round photo profile-pic" id="profile-pic" style="background-image: url(/assets/img/no_img.png); ">
        <div class="icon_camera">
            <i class="fas fa-camera upload-button" ></i>
            <input class="file-upload" type="file" accept="image/*" id="g_img[]" name="g_img[]"/>
        </div>
    </div>

</form>

<script>
    $(document).ready(function() {

        var readURL = function(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    //$('.profile-pic').attr('src', e.target.result);
                    $('.profile-pic').css({"background":"url("+e.target.result+")"}); //배경이미지로-
                    $('.profile-pic').css('background-size','cover');
                    $('.profile-pic').css('background-position','center center');
                    $('.profile-pic').css('background-repeat','no-repeat');
                    $('.upload-button').focus();
                }

                reader.readAsDataURL(input.files[0]);
            }
        }


        $(".file-upload").on('change', function(){
            readURL(this);
        });

        $(".upload-button").on('click', function() {
            $(".file-upload").click();
        });


    });
    
    
    //등록 함수
    function reg_ok(){
        if (confirm('등록 하시겠습니까?')) {

            var formData = new FormData($('#frm')[0]);

            $.ajax({
                url: 'http://...', //request 보낼 서버의 경로
                type: 'post', // 메소드(get, post, put 등)
                dataType: "json",
                enctype: 'multipart/form-data',
                async: false, //동기: false, 비동기(기본값): ture
                data: formData, //보낼 데이터,
                processData: false,
                contentType: false,
                timeout: 3000,
                headers: {
                    "Authorization": token //로그인 토큰
                },
                success: function (data) {
                    alert(data.message);
                    location.reload();
                },
                error: function (request, status, error) {
                    //서버로부터 응답이 정상적으로 처리되지 못햇을 때 실행
                    rtnmsg = JSON.parse(request.responseText);
                    alert(rtnmsg.message);
                    console.log("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
                }
            });

        }
    }
</script>