html input 파일 이미지 미리보기 구현(멀티) 미리보기삭제

아래 그림은 간단한 게시판 입력 화면입니다.

아래 그림에서 처럼 이미지 미리보기에서 삭제를 하면 input file에 선택되어 있는 파일도 삭제하는 기능을 만들고 싶습니다.

어떻게 하면 될까요?

 

우선 기본적으로 html 파일에 아래 소스가 있다고 가정해 봅시다.

<div class="form-group">
    <label for="subject">
        파일
    </label>
    <div id='current_file'>
        <input type="file" class="form-control" id="image" name="image[]" multiple='multiple'/>
    </div>
</div>
 
<div class="form-group">
    <label for="subject">
        파일미리보기
    </label>
</div>
 

js 설정 화면 소스입니다.

$("#image").change(function() {
        $("#preview_img").empty();
        var input = document.getElementById("image");
        var files = input.files;
        var a = 0;
        for (var i = 0; i < files.length; i++) {
 
            var fReader = new FileReader();
            fReader.readAsDataURL(files[i]);
 
            fReader.onloadend = function(event){
                var lastModified = files[a].lastModified;
                $("#preview_img").append('<div class="img_div" id="'+lastModified+'"><div class="i_div"><i class="bi bi-x-square-fill" style="color:white;float:right;" key="'+lastModified+'"></i></div><img id="view" src="'+event.target.result+'" class="img_div_img"/></div>');
                a = a + 1;
            }
        }
 
    });
 
    $(document).on("click", ".i_div", function(e){
        var input = $("#image").prop('files');        
        const dataTranster = new DataTransfer();
        var target = e.target;
        var removeTargetId = $(target).attr("key");
        Array.from(input).filter(file => file.lastModified != removeTargetId)
        .forEach(file => {
            dataTranster.items.add(file);
        });
 
        $('#image')[0].files = dataTranster.files;
 
        $("#"+removeTargetId).remove();
 
        var input = $("#image")[0].files;        
 
    });

 

 

삭제 버튼을 눌렀을 때 파일 선택으로 선택했던 filelist에서도 삭제가 되어야 합니다.

$("#image")로 선택되어 있는 fileList를 가져옵니다.

var input = $("#image").prop('files');  => 파일선택 input 

--> 여러 가지 방법으로 가져올 수 있음

 ex 1) var input = document.getElementById('image').files;
 ex 2) var input = $('#image').prop('files');
 ex 3) var input = $('#image')[0].files;
 ex 4) var input = $('input[type=file]')[0].files;
 ex 5) var input = docuement.querySelector("#image").files

const dataTranster = new DataTransfer();

var removeId = $(target).attr("key");

Array.from(input).filter(file => file.lastModified != removeId)
.forEach(file => {
dataTranster.items.add(file);
});

$('#image')[0].files = dataTranster.files;

위 소스의 핵심은 FileList를 forEach로 돌면서 removeId(삭제할)와 같지 않으면 dataTranster.items으로 파일을 추가하는 것이다.

마지막으로 $('#image')[0].files = datraTranster.files;로 대체하기만 하면 된다.

 

소스 전체 파일

감사합니다.