[jQuery] 이미지 업로드시 미리보기 기능 구현하기 - 이미지 수정

[jQuery] 이미지 업로드시 미리보기 기능 구현하기 - 이미지 등록 (tistory.com)

[jQuery] 이미지 업로드시 미리보기 기능 구현하기 - 이미지 등록

 

 

 

이미지 수정에서 중앙에 opacity 로 연하게 첨부할수 있는 버튼이 있고, 우측상단에는 첨부한 이미지 삭제 버튼이 있다.

수정전에 이미지를 배경이미지로 background-image 로 넣어놓고 시작한다.

 

기존 이미지파일 부분은 간단히 PHP 로 소스로 넣어두었다. 2라인에서 7라인까지

 
<?
$filename1Img = "";
if ($filename1) {
    $filename1Img = "background-image: url('/pds/item/".$filename1."');";
}
?>
 
<div class="work_place03_edit">
 
    <form id="f1" name="f1" method="post" enctype="multipart/form-data">
    <input type="hidden" name="no" value="<?=$no?>">
 
    <input type=hidden name="file1_old" value="<?=$filename1?>">
    <input type=hidden name="file1size_old" value="<?=$filesize1?>">
    <input type=hidden name="origin_file1_old" value="<?=$origin_filename1?>">
 
 
    <div class="upload-box">
        <div id="drop-file" class="drag-file" style="width: 100%;height:100%; flex-direction: column; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; position: relative;<?=$filename1Img?>">
            <div class="upload_bg" style="opacity:45%;">
            <img src="/image/upload_icon.png" alt="파일 아이콘"
                class="image">
            <p class="message">(10MB 이하 업로드)</p>
            <label class="file-label" for="chooseFile">사진첩에서 사진 가져오기</label>
            <input class="file" id="chooseFile" type="file" name="userfile1" accept="image/*" onchange="dropFile.handleFiles(this.files)">
            </div>
        </div>
        <button type="button" class="del"><img src="/image/work_place_icon5.png" alt=""></button>
    </div>
    <span style="color:red; margin: 10px 0 0 0; display: block;">(*) 중앙에 '사진첩에서 사진 가져오기' 버튼을 누르시고 이미지를 첨부해주세요.</span>
 
</div>
 
<script>
//  const fileImage = document.querySelector('.work_place03_edit .upload-box input');
    const fileImage = document.getElementById("chooseFile");
    const filePreview = document.querySelector('.work_place03_edit .upload-box');
    const fileMaxsize = 10 * 1024 * 1024;
 
    fileImage.onchange = function () {
        const reader = new FileReader();
 
        reader.onload = function (e) {
            const fileSize = fileImage.files[0].size;
            if (fileSize > fileMaxsize) {
                alert('10MB 이하의 사진만 업로드 가능합니다.');
                fileImage.value="";
                return;
            } else {}
 
            // get loaded data and render thumbnail.
            filePreview.style.backgroundImage = "url(" + e.target.result + ")";
            console.log(e.target.result);
            filePreview.classList.add("has-image");
            if ($(filePreview).hasClass("has-image")) {
                //console.log('사진있음');
                $(filePreview).find('.del').show();
                $(filePreview).find('.del').click(function () {
                    fileImage.value="";
                    $(filePreview).removeClass('has-image');
                    $(this).hide();
                })
            }
        };
 
        $(filePreview).find('.del').click(function (event) {
            event.preventDefault(); // 기본 동작 방지
            $(filePreview).css("background-image", "none"); // 선택된 이미지 제거
            fileImage.value = ''; // 파일 입력 필드 초기화
            $(filePreview).removeClass('has-image');
            $(this).hide();
            $("#drop-file").css("background-image","url('/pds/item/<?=$filename1?>')");
        });
 
        // read the image file as a data URL.
        reader.readAsDataURL(this.files[0]);
        $("#drop-file").css("background-image","");
    };
</script>