js

[jQuery] 파일 업로드 input type = 'file' 다중으로 생성하기

hellooooo 2021. 10. 26. 17:18
728x90

 

html 

<ul class="__add"> 
  <li>
   <input type="file" id="QnA03" name="file_path" class="files" style="width: 231px; height: 46px;">
   <button  type="button"class="_add" style="vertical-align: sub">추가</button>
  </li> 
</ul>

js

var maxAppend = 1;

$('.__add ._add').on('click',function(){ 
   if(maxAppend >= 3){
      alert("파일 업로드 최대 개수는 3개 입니다.");
      return;
   }else{
       $('.__add').append('<li><input type="file"name="file_path" class="files"> <button type="button" class="_add" onclick="addDel(this);">삭제</button></li>'); 
       maxAppend ++;
   }
   
 });
 
 function addDel(a){ 
    $(a).closest('li').remove(); 
    maxAppend --;
 }