updated_at: 2024-12-14 18:49

클릭하면 파일 입력칸 자동 생성 및 자동삭제

function f_add_file()
{
  var lo_table = document.getElementById("tbl_attach"); // 테이블지정
  var li_rows  = lo_table.rows.length; // 테이블 row 개수(Tr의 개수
  var lo_tbody = lo_table.childNodes[0]; // table의 첫번째 차일드 즉 tbody를 지정한다.
  var lo_row,lo_cell;

  lo_row = document.createElement("tr"); // Tr을 하나 생성한다.
  lo_tbody.appendChild(lo_row); // tbody에 자식노드를 하나 추가한다.
  lo_cell = document.createElement("td"); // Td를 생성한다.
  lo_row.appendChild(lo_cell); // Tr에 td를 하나 추가한다.
  lo_cell.innerHTML = "<input type=\"file\" name=\"file_" + (li_rows+1) + "\">"; // 고유이름지정

  // 몇개의 폼을 전송하는지 카운트를 넣어준다.
  frm_upload.hid_count.value = li_rows+1;
}

/*
' ------------------------------------------------------------------
' Function    : f_add_file()
' Description : 테이블의 row를 삭제한다. tr이 하나도 존재하지 않으면
'               삭제하지 않는다.
' Argument    : 
' Return      : 
' ------------------------------------------------------------------
*/
function f_del_file()
{
  var lo_table = document.getElementById("tbl_attach"); // 테이블지정
  var li_rows  = lo_table.rows.length; // 테이블 row 개수(Tr의 개수)
  var li_row_index = li_rows -1; // 테이블 row 즉 Tr의 고유 인덱스를 지정함

  // tr이 하나도 없을때는 삭제하지 않는다.
  if(li_row_index >= 0)
  {
    lo_table.deleteRow(li_row_index);
  }   
}
<form name="frm_upload" method="post" enctype="multipart/form-data">
  <input type="hidden" name="hid_count">

  <!-- 추가 삭제버튼 -->
  <img src="btn_add.gif" onclick="f_del_file();">
  <img src="btn_del.gif" onclick="f_add_file();">


  <!-- 첨부파일 추가공간 -->
  <table id="tbl_attach">
  </table>

</form>
평점을 남겨주세요
평점 : 2.5
총 투표수 : 1

질문 및 답글