jQuery 단일/다중 이미지 선택기 - 미디어 선택기

30544 단어 jquerymediaselector
원래 게시된 @https://codeanddeploy.com 방문하여 샘플 코드 다운로드: https://codeanddeploy.com/blog/jquery-plugins/jquery-singlemultiple-image-selector-media-selector

이 게시물에서는 갤러리에서 단일 또는 여러 이미지(또는 기타 요소)를 선택할 수 있는 Media Selector jQuery 플러그인을 구현하는 방법을 보여줍니다.



단일/다중 이미지 선택기 jquery 플러그인을 사용하는 방법은 무엇입니까?



1단계: 이미지 삽입



체크 아이콘이 있는 이미지를 CSS 클래스 'image-checkbox'의 레이블에 삽입합니다. 'su-media-id' 속성을 사용하여 각 이미지 요소에 고유한 ID를 할당해야 합니다.

<label class="image-checkbox">
    <img su-media-id="orange"
       src="img1.jpg" />
    <i class="fa fa-check"></i>
</label>
<label class="image-checkbox">
    <img su-media-id="apple"
       src="img2.jpg" />
    <i class="fa fa-check"></i>
</label>
<label class="image-checkbox">
   <img su-media-id="grapes"
        src="img3.jpg" />
    <i class="fa fa-check"></i>
</label>


2단계: 토글 체크박스 추가



단일 선택과 다중 선택 사이를 전환하는 확인란을 추가합니다.

<input type="checkbox" class="custom-control-input" id="allowmultiple">
    <label class="custom-control-label" for="allowmultiple" style="cursor: pointer;">Select
    Multiple</label>


3단계: 미디어 미리보기 설정



Media Selector가 선택한 이미지 ID를 포함하는 JSON 문자열을 표시하는 결과 컨테이너를 만듭니다.

<div id="selectedmediapreview"></div>


4단계: 스타일 로드



이미지 확인란의 스타일을 지정하려면 CSS를 로드하세요.

.image-checkbox {
    cursor: pointer;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 3px solid transparent;
    box-shadow: 0 0 4px #ccc;
    outline: 0;
    margin: 4px;
    border-radius: 12px;
}

.image-checkbox-checked {
    border-color: #2196f3;
}

img {
    border-radius: 8px;
    max-height: 160px !important;
    max-width: -webkit-fill-available;
}

.image-checkbox i {
    display: none;
    color: #2196f3;
}

.image-checkbox-checked {
    position: relative;
}

.image-checkbox-checked i {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
}


5단계: jQuery 라이브러리 자산 로드




 <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
    <script src="assets/js/scripts.js"></script>


6단계: jQuery 스크립트 로드



JavaScript를 초기화하여 이미지 선택기를 활성화합니다.

jQuery(function ($) {
    var mediaArray = [];
    var selectedMediasId;
    var isMultipleAllowed = false;
    $('#allowmultiple').click(function () {
        isMultipleAllowed = $('#allowmultiple').is(':checked') ? true : false;
        $('.image-checkbox-checked').each(function () {
            $(this).removeClass('image-checkbox-checked');
        });
        mediaArray = [];
        $('#selectedmediapreview').html('');
    });


    $(".image-checkbox").on("click", function (e) {
        var selected = $(this).find('img').attr('su-media-id');
        //console.log(selected);
        if ($(this).hasClass('image-checkbox-checked')) {
            $(this).removeClass('image-checkbox-checked');
            // remove deselected item from array
            mediaArray = $.grep(mediaArray, function (value) {
                return value != selected;
            });
        }
        else {
            if (isMultipleAllowed == false) {
                $('.image-checkbox-checked').each(function () {
                    $(this).removeClass('image-checkbox-checked');
                });
                mediaArray = [];
                mediaArray.push(selected);
            } else {
                if (mediaArray.indexOf(selected) === -1) {
                    mediaArray.push(selected);
                }
            }
            $(this).addClass('image-checkbox-checked');
        }
        //console.log(selected);
        console.log(mediaArray);
        selectedMediasId = mediaArray.join(",");
        console.log(selectedMediasId);
        $('#selectedmediapreview').html('<div class="alert alert-success"><pre lang="js">' + JSON.stringify(mediaArray.join(", "), null, 4) + '</pre></div>');
        //console.log(isMultipleAllowed);
        e.preventDefault();
    });
});


7단계: 전체 소스는 다음과 같습니다.



단일/다중 이미지 선택기 코드

<!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>Media Selector</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
    <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body>
    <div class="container mt-4">
        <div class="row">
            <div class="col mb-2">
                <div class="custom-control custom-checkbox mr-sm-2">
                    <input type="checkbox" class="custom-control-input" id="allowmultiple">
                    <label class="custom-control-label" for="allowmultiple" style="cursor: pointer;">Select
                        multiple</label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="mb-3 p-3" style="border-radius: 6px; border: 2px solid #cccccc42">
                    <label class="image-checkbox">
                        <img su-media-id="orange"
                            src="https://images.pexels.com/photos/161559/background-bitter-breakfast-bright-161559.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=100" />
                        <i class="fa fa-check"></i>
                    </label>
                    <label class="image-checkbox">
                        <img su-media-id="kiwi"
                            src="https://images.pexels.com/photos/51312/kiwi-fruit-vitamins-healthy-eating-51312.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=100" />
                        <i class="fa fa-check"></i>
                    </label>
                    <label class="image-checkbox">
                        <img su-media-id="strabery"
                            src="https://images.pexels.com/photos/934066/pexels-photo-934066.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=100" />
                        <i class="fa fa-check"></i>
                    </label>
                    <label class="image-checkbox">
                        <img su-media-id="apple"
                            src="https://images.pexels.com/photos/533343/pexels-photo-533343.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=100" />
                        <i class="fa fa-check"></i>
                    </label>
                    <label class="image-checkbox">
                        <img su-media-id="watermelon"
                            src="https://images.pexels.com/photos/1313267/pexels-photo-1313267.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=100" />
                        <i class="fa fa-check"></i>
                    </label>
                    <label class="image-checkbox">
                        <img su-media-id="papaya"
                            src="https://images.pexels.com/photos/1824354/pexels-photo-1824354.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=100" />
                        <i class="fa fa-check"></i>
                    </label>
                    <label class="image-checkbox">
                        <img su-media-id="lemon"
                            src="https://images.pexels.com/photos/952365/pexels-photo-952365.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=100" />
                        <i class="fa fa-check"></i>
                    </label>
                    <label class="image-checkbox">
                        <img su-media-id="multifruit"
                            src="https://images.pexels.com/photos/142520/pexels-photo-142520.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=100" />
                        <i class="fa fa-check"></i>
                    </label>
                    <label class="image-checkbox">
                        <img su-media-id="pumpking"
                            src="https://images.pexels.com/photos/673073/pexels-photo-673073.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=100" />
                        <i class="fa fa-check"></i>
                    </label>
                    <label class="image-checkbox">
                        <img su-media-id="tomatto"
                            src="https://images.pexels.com/photos/53588/tomatoes-vegetables-food-frisch-53588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=100" />
                        <i class="fa fa-check"></i>
                    </label>

                </div>
            </div>
        </div>
        <div id="selectedmediapreview"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
    <script src="assets/js/scripts.js"></script>
</body>

</html>


이 유용한 jQuery 플러그인은 devsharif.에서 개발했습니다.

이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/jquery-plugins/jquery-singlemultiple-image-selector-media-selector를 방문하십시오.

행복한 코딩 :)
【이미지 처리 100개 노크에 도전】Q.26. Bi-linear 보간
Laravel 8 블레이드 While 루프 예제

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage