https://xn--9t4b80d6whg4b8yl.kr/member/js/preview.js

1(function($) {
2    const defaultMaxSize = 500;
3
4    /**
5     * @function $.fn.validate
6     * @description 이 플러그인은 input 태그에 이미지뷰를 생성합니다.
7     * @param {Object} options - 옵션 객체
8     * @param {string} [options.default_image] - 초기 이미지
9     * @param {number} [options.width] - 가로 길이
10     * @param {number} [options.height] - 세로 길이
11     * @param {string} [options.label] - 초기 라벨 요소
12     * @param {string} [options.button_label] - 버튼 라벨 요소
13     * @param {number} [options.max_size] - 이미지뷰의 최대 사이즈
14     * @param {function} [options.onchange] - 이미지 변경 시 호출
15     * @return jQuery
16     */
17    $.fn.preview = function(options) {
18
19        let id = this.attr("id");
20        let name = this.attr("name");
21        let label = options.label;
22        let button_label = options.button_label;
23
24        this.replaceWith(`
25        <div class="file-img-box">
26            <input class="preview" type="file" name="${name}" id="${id}" accept="image/jpg, image/png, image/jpeg">
27            <div class="image-view">
28                <div class="photo-delete">
29                    <img src="/admin/images/ico_close.svg" alt="x아이콘" width="10">
30                </div>
31            </div>
32            <div>
33                <label for="${id}" class="flex-box align-items-center justify-content-center">${button_label ?? "파일 찾기"}</label>
34                <span class="file-name">${label ?? "선택된 파일이 없습니다."}</span>
35            </div>
36        </div> 
37        `);
38        let input = $(`#${id}`);
39        let parent = input.closest(".file-img-box");
40
41        parent.find("input").on("change", function() {
42            const file = this.files[0];
43            if(file) {
44                const reader = new FileReader();
45                const img = new Image();
46
47                reader.onload = function (e) {
48                    img.src = e.target.result;
49                    img.onload = function () {
50                        options.default_image = e.target.result;
51                        options.width = img.width;
52                        options.height = img.height;
53                        options.label = file.name;
54                        input.setPreview(options);
55                        if(options.onchange) options.onchange(img);
56                        $(".file-img-box .image-view").css('display', 'block');
57                        $(".file-img-box .file-name").css('color', '#222222');
58                        $(".page-footer").css("bottom", "auto");
59                    };
60                };
61
62                reader.readAsDataURL(file);
63            }
64        });
65
66        parent.find(".photo-delete").on("click", function() {
67            let $parent = $(this).closest(".file-img-box");
68            let $input = $parent.find("input[type='file']");
69            $input.resetPreview();
70        });
71
72        if(options.default_image) {
73            let img = new Image();
74            img.src = options.default_image;
75            img.onload = function() {
76                options.width = img.naturalWidth;
77                options.height = img.naturalHeight;
78                input.setPreview(options);
79            }
80        }
81        return input;
82    }
83
84    /**
85     * @function $.fn.setPreview
86     * @description 이 플러그인은 input 태그에 이미지뷰를 세팅합니다.
87     * * @param {Object} options - 옵션 객체
88     * @param {string} [options.default_image] - 초기 이미지
89     * @param {number} [options.width] - 가로 길이
90     * @param {number} [options.height] - 세로 길이
91     * @param {string} [options.label] - 초기 라벨 요소
92     * @param {string} [options.button_label] - 버튼 라벨 요소
93     * @param {number} [options.max_size] - 이미지뷰의 최대 사이즈
94     * @param {function} [options.onchange] - 이미지 변경 시 호출
95     */
96    $.fn.setPreview = function(options) {
97        if(options.default_image) {
98            const max_size = options.max_size ?? defaultMaxSize;
99            const parent = this.closest(".file-img-box");

100            const preview = parent.find(".image-view");
101            const filename_element = parent.find(".file-name");
102            const originalWidth = options.width;
103            const originalHeight = options.height;
104            const aspectRatio = originalWidth / originalHeight;
105
106            preview.show().css("background-image", `url('${options.default_image}')`)
107            filename_element.text(options?.label);
108            parent.find('.photo-delete').css('display', 'flex');
109
110            if (originalWidth > originalHeight) {
111                let min = Math.min(originalWidth, max_size);
112                preview.css("width", `${min}px`);
113                preview.css("height", `${(min / aspectRatio)}px`);
114            } else {
115                let min = Math.min(originalHeight, max_size);
116                preview.css("height", `${min}px`);
117                preview.css("width", `${(min * aspectRatio)}px`);
118            }
119
120            parent.show();
121        }
122    }
123
124    /**
125     * @function $.fn.resetPreview
126     * @description 이 input 태그에 이미지뷰를 초기화합니다.
127     */
128    $.fn.resetPreview = function() {
129        let $parent = this.closest(".file-img-box");
130        let $image_view = $parent.find('.image-view');
131        $image_view.css({
132            'width' : '250px',
133            'height' : '250px',
134            'background-image' : ''
135        });
136        $parent.find(".image-view").css('display', 'none');
137        $parent.find('.file-name').text("선택된 파일이 없습니다.").css('color', '#bbbbbb');
138        this.val("");
139        $image_view.find(".photo-delete").hide();
140    }
141
142})(jQuery);