[JS] input type file 파일 미리보기 수정 삭제 기능

 

console.log()
function handleFileSelect(event) {
    var input = this;
    console.log(input.files)
    if (input.files && input.files.length) {
        var reader = new FileReader();
        this.enabled = false
        reader.onload = (function (e) {
        console.log(e)
            $("#preview").html(['<img class="thumb" src="', e.target.result, '" title="', escape(e.name), '"/>'].join(''))
        });
        reader.readAsDataURL(input.files[0]);
    }
}
$('#file').change(handleFileSelect);
$('.file-edit-icon').on('click', '.preview-de', function () {
    $("#preview").empty()
    $("#file").val("");
});
$('.preview-edit').click( function() {
  $("#file").click();
} );

<div class="file-wrapper flie-wrapper-area">
  <div class="float-left">
    <span class="label-plus"><i class="fas fa-plus"></i></span>
    <input type="file" name="file" id="file" class="upload-box upload-plus" accept="image/*">
    <div id="preview"></div>
    <div class="file-edit-icon">
      <a href="#" class="preview-edit">수정</a>
      <a href="#" class="preview-de">삭제</a>
    </div>
  </div>
</div>

.thumb {
    width: 100px;
    height: 100px;
    margin: 0.2em -0.7em 0 0;
}
.remove_img_preview {
    position:relative;
    top:-25px;
    right:5px;
    background:black;
    color:white;
    border-radius:50px;
    font-size:0.9em;
    padding: 0 0.3em 0;
    text-align:center;
    cursor:pointer;
}

http://yoonbumtae.com/?p=3304 

자바스크립트: input file에서 이미지 미리보기 기능 만들기 (한 개, 여러 개) - BGSMM

https://guiyomi.tistory.com/119

Javascript - 업로드한 이미지 미리보기 구현

https://designcck.tistory.com/43

[JS] input type file 파일 미리보기 수정 삭제 기능