라이브러리

file preview

html

<div class="js-file-box">
    <!-- data-file 값이 매칭되어야 함 -->
    <input type="file" title="파일 업로드" accept="image/png, image/gif, image/jpeg, image/jpg" onchange="uploadFile(this);" data-file="1" class="js-file-item">
    <div class="js-file-img-box" data-file="1"></div>
</div>

script

// 이미지 파일 미리보기
function uploadFile(target) {
    const $imgFile = $(target).data("file"),
        $imgBox = $(".js-file-img-box[data-file='"+$imgFile+"']");
    if (target.files && (target.files[0])) {
        const fileReader = new FileReader();
        fileReader.onload = function(e) {
            let html = "";
            html += "<div class='js-file-img'>";
            html += "<img src='"+e.target.result+"'>";
            html += "<button type='button' class='del' onclick='uploadFileDel(this);'>삭제</button>";
            html += "</div>";
            $imgBox.find(".js-file-img").remove();
            $imgBox.append(html);
        };
        fileReader.readAsDataURL(target.files[0]);
    }
}

// 이미지 파일 미리보기 삭제
function uploadFileDel(target) {
    const $imgBox = $(target).closest('.js-file-img-box'),
        $data = $imgBox.data("file");
    $(".js-file-item[data-file='"+$data+"']").val("");
    $imgBox.html("");
}