자바스크립트 File input 동적 추가, 삭제하기(이벤트 위임)

 

 

 

완성본 미리보기

 

 

서론 💭

전에 진행했던 프로젝트에서 j쿼리를 이용해 작성한 코드를 자바스크립트로 바꾸는 과정을 진행하고 있는데 약간의 애를 먹었던 동적으로 input file 태그를 추가해주는 작업!

파일 추가 버튼을 누르면 input이 추가 되고 추가된 삭제 버튼을 누르면 해당 input이 삭제되는 기능이다. 

input 태그는 잘 늘어나는데 삭제가 뒤죽박죽으로 됨, 삭제는 되는데 파일 선택이 안 됨, 걍 삭제가 안 됨 등 다양했는데 어쨌는 해내었다 ㅎ 

 

 

 

 

JSP 일부

<tr>
    <th class="header"><label for="file" >이미지 첨부</label></th>
    <td class="contents">
        <div id = "main" style="margin-bottom: 11px;">메인 이미지
        <span>
            <input type="file" name="mainIamge" style="border: none; width: auto;">
        </span>
        </div>
        상세 이미지
        <span>
            <input type="file" id="file" name="file_0" style="border: none; width: auto;">
            <a href="#this" class="btn" id="addFileInput">파일 추가</a>
        </span>
        <div id="fileDiv"></div>
    </td>
</tr>  

 

메인이미지는 이미지 한 장만 업로드 할 수 있도록 구현했기 때문에 상세이미지에만 기능을 적용했다.

input 태그의 name 값으로 각각의 input을 구분하도록 했고 동적으로 input 태그가 추가될 곳은 div 태그를 이용해 공간을 생성해두었다.

 

 

 

 

JavaScript

1. 파일 추가 버튼 클릭 이벤트

 

const addFileBtn = document.getElementById('addFileInput');
 
addFileBtn.addEventListener('click', function(e){

   fn_addFileInput();
});

 

var count = 1;
 
//file input 추가
function fn_addFileInput() {
   let fileDiv = document.getElementById('fileDiv');
   let fileName = 'file_' + (count++);
 
   //새로 생성되는 file input
   let newFileInput = document.createElement('input');
   newFileInput.type = 'file';
   newFileInput.id = 'file';
   newFileInput.name = fileName;
   newFileInput.style = 'border:none; width:auto; padding-left:79px;';
 
   //새로 생성되는 file input 삭제 버튼
   let newDeleteFileInputBtn = document.createElement('button');
   newDeleteFileInputBtn.type = 'button';
   newDeleteFileInputBtn.id = 'delete-file-input';
   newDeleteFileInputBtn.textContent = '삭제';
   newDeleteFileInputBtn.dataset.fileName = fileName;
 
   let newFileInputWrapper = document.createElement('p');
   newFileInputWrapper.appendChild(newFileInput);
   newFileInputWrapper.appendChild(newDeleteFileInputBtn);
 
   //추가해주기
   fileDiv.appendChild(newFileInputWrapper);
}

 

버튼을 누르면 fn_addFileInput() 함수가 동작한다.

count라는 이름의 전역 변수를 선언하고, 각각의 input 태그를 구분 할 수 있도록 전역변수를 사용하여 file_1을 시작으로 file_2, file_3 이런 식으로 name 속성이 붙게 해주었다.

input 태그와 input을 삭제하는 버튼, 그리고 이 둘을 합쳐줄 p 태그를 createElement를 이용하여 만들고,

appendChild 메서드로 input과 삭제 버튼을 p 태그 안에 추가해주었다.

p 태그 안에 모든 요소들이 담겼으니 div 안에 appendChild로 p 태그를 추가해준다.

 

이렇게하면 파일 추가 버튼은 정상 작동한다!

 

 

 

 

2. 삭제 버튼 구현

삭제 버튼은 fn_addFileInput() 함수가 동작한 이후 생성된다. 파일 추가 버튼을 눌러야만 생성되는 버튼이란 것이다.

그래서 처음엔  fn_addFileInput() 함수 안에다 이벤트를 작성 했었고 무조건 '삭제 버튼 자체'에 이벤트를 걸어주려고 했다. 당연하다고 생각했다...

그러다 이벤트 위임 개념을 알게 되었고 활용해보았다.

 

 

document.getElementById('fileDiv').addEventListener('click' , function(e) {
   if(e.target.matches('[data-file-name]')) {
      fn_deleteFileInput(e.target);
   }
});
 
function fn_deleteFileInput(target) {
   target.parentElement.remove();
}

 

file input과 삭제 버튼이 추가 될 fileDiv 자체에 클릭 이벤트를 걸어줬다.

e.target은 클릭 이벤트가 발생한 요소를 뜻하고 matches() 메서드를 통해 data-file-name 속성을 가지고 있는지 검사한다.

삭제 버튼을 동적으로 만드는 과정에서 dataset을 넣어준 이유이다!

조건문을 통과하면 input 태그를 삭제해줄 fn_deleteFileInput() 함수가 동작하게 된다.

 

fn_deleteFileInput() 함수가 동작하는 요소는 삭제버튼이다.

삭제 될 input 태그는 삭제 버튼의 부모 요소이므로 parentElement로 삭제해주면 된다.

 

 

 

 

 

 

daaaaammMmm

 

리팩터링을 진행하며 matches() 메서드도 처음.. 알게 되었고 이벤트 위임은 전에 캡처링/버블링 관련 영상을 보다가 접한적이 있는데 써먹어보다니 뿌듯하다!

 

 

 

 

 

---

참고

• https://choar816.tistory.com/152