이미지 선택 및 취소

 

 

#    조건

        -   첫번째 이미지에 "대표이미지" 글자 보이기

        -   첨부파일이 있으면 취소 버튼 보이기

        -   첨부파일이 있는 상태에서 파일선택하려고 하면 취소 먼저 하라고 알리기

        -   파일선택된 위치 기억하기

 

 

 <style>
    .sample-book-cover {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        padding: 20px;
    }
    .cover-item {
        border: 1px solid #ccc;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #f0f0f0;
        padding: 10px;
    }
    .preview-container {

 		position: relative;  

        width: 100%;
        aspect-ratio: 1 / 1;
        margin-bottom: 10px;
        overflow: hidden;
    }
    .preview {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .button-container {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    .file-input {
        display: none;
    }
    .file-button, .cancel-button {
        padding: 6px 12px;
        background-color: #f8f9fa;
        border: 1px solid #ced4da;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        color: #212529;
    }
    .file-button:hover, .cancel-button:hover {
        background-color: #e9ecef;
    }

	 .representative-label {
        position: absolute;
        top: 5px;
        right: 5px;
        background-color: rgba(255, 255, 255, 0.7);
        padding: 5px 5px;
        font-size: 12px;
        font-weight: bold;
        border-radius: 3px;
    }

</style>

 

<div class="sample-book-cover">
    <?php 
        // 이미지 커버 문자열을 세미콜론으로 나눠 배열로 변환
        $aa = explode(";", $imgCover);

        // 최대 6개의 이미지 커버를 처리
        for ($i = 0; $i <= 5; $i++) {
            if ($i <= count($aa) - 1) {
                // 배열의 해당 인덱스가 비어있는 경우 빈 문자열 할당
                if ($aa[$i] == "") {
                    $aa[$i] = "";
                }
            } else {
                // 배열의 크기가 6보다 작다면 "noimage.jpg"를 할당
                $aa[$i] = "noimage.jpg";
            }
    ?>
            <div class="cover-item">
                <div class="preview-container">
                    <!-- 이미지 미리보기 -->
                    <img src="./mall/item_img/<?php echo trim($aa[$i]); ?>" alt="noImage" class="preview">
                    <?php if ($i == 0) { ?>
                        <!-- 첫 번째 이미지는 대표이미지로 표시 -->
                        <span class="representative-label">대표이미지</span>
                    <?php } ?>
                </div>
                <!-- 파일 입력 요소 -->
                <input type="file" id="file<?php echo $i; ?>" name="imgcover" class="file-input" onchange="previewImage(this)">
                <!-- 기존 이미지 커버를 저장하는 숨겨진 입력 요소 -->
                <input type="hidden" name="oldimgcover" value="<?php echo trim($aa[$i]); ?>">
                <div class="button-container">
                    <!-- 파일 선택 버튼 -->
                    <input type="button" value="파일 선택" onclick="startUpload(<?php echo $i; ?>)" class="file-button">
                    <!-- 업로드 취소 버튼 -->
                    <input type="button" value="취소" onclick="cancelUpload(this)" 
                    <?php 
                    // 이미지가 존재하는 경우에만 취소 버튼을 표시
                    if(trim($aa[$i]) != "") { 
                        echo "style='display:inline-block;'";
                    } else { 
                        echo "style='display:none;'";
                    } ?>>
                </div>
            </div>
    <?php 
        } 
    ?>
</div>

 

 

<script>
    // 파일 선택 시 이미지 미리보기를 설정하는 함수
	function previewImage(input) {
        const file = input.files[0];  // 선택한 파일 가져오기
        if (file) {
            const preview = input.closest('.cover-item').querySelector('.preview');  // 현재 .cover-item에서 .preview 요소 찾기
            preview.src = URL.createObjectURL(file);  // 선택한 파일을 URL로 변환하여 미리보기 설정
            input.closest('.cover-item').querySelector('.cancel-button').style.display = 'inline-block';  // 취소 버튼 표시
        }
    }

    // 업로드 시작 함수, 기존 이미지가 있는 경우 경고 메시지 표시
    function startUpload(index) {
        const oldImgCovers = document.querySelectorAll('input[name="oldimgcover"]');  // 모든 oldimgcover input 요소 가져오기

        if (oldImgCovers[index].value != "") {
            alert("\n\n이미지를 변경하시려면 기존 이미지를 취소해주세요.");  // 기존 이미지가 있을 경우 경고 메시지 표시
        } else {
            document.getElementById('file' + index.toString()).click();  // 파일 선택 input 요소 클릭
        }
    }

    // 업로드 취소 함수
    function cancelUpload(button) {
        const coverItem = button.closest('.cover-item');  // 현재 버튼의 .cover-item 요소 찾기
        const input = coverItem.querySelector('.file-input');  // .cover-item 내의 파일 입력 요소 찾기
        const preview = coverItem.querySelector('.preview');  // .cover-item 내의 미리보기 이미지 요소 찾기
        input.value = '';  // 파일 입력 요소의 값을 비우기
        URL.revokeObjectURL(preview.src);  // 미리보기 URL 해제
        preview.src = '';  // 미리보기 이미지 비우기
        const index = Array.from(coverItem.parentNode.children).indexOf(coverItem);  // 현재 .cover-item의 인덱스 찾기

        // 'oldimgcover' input 요소 찾기
        const oldImgCovers = document.querySelectorAll('input[name="oldimgcover"]');
        if (index >= 0 && index < oldImgCovers.length) {
            const oldImgCover = oldImgCovers[index];
            console.log("Old Image Cover Element:", oldImgCover);  // 디버그를 위한 콘솔 로그
            oldImgCover.value = "";  // oldimgcover input 요소 값 비우기
        }
        button.style.display = 'none';  // 취소 버튼 숨기기
    }
</script>

 

<?php
// 'originalimgCover'를 세미콜론으로 분리하여 배열로 변환
$imgCover = explode(";", $_POST["limgCover"]);
$oldimgCover = explode(";", $_POST["oldimgCover"]);

$imgcover_string = "";

// 최대 6개의 파일을 처리
for ($i = 1; $i <= 6; $i++) {
    
    // 신규 파일 첨부
    if ($imgCover != "" && trim(oldimgCover[$i]) == "") {
        $imgcover_string .= trim(imgCover[$i] . ";";
    }

    // 기존 파일 취소 처리
    if ($imgCover == "" && trim(oldimgCover[$i]) != "") {
        $imgcover_string .= trim(oldimgCover[$i]) . ";";
    }

    // 빈 영역 처리
    if ($imgCover == "" && trim(oldimgCover[$i]) == "") {
        $imgcover_string .= ";";
    }
}


// DB에 저장할 순서대로의 이미지 문자열
$imgcover_string

?>