동적 폼원소 추가에 대해 질문드립니다.

[vection]

안녕하세요.
기존 IE에서 사용하던 폼원소 동적 추가를 파이어폭스에 적용시키려는데
잘 안되어 질문드립니다.
참고로 php 사이트입니다.


IE에서는 다음과 같은 방식으로 input 원소를 추가해서 다중업로드를
구현했는데요.

Code: Select all

<script language="javascript">
function addElements() {
  var oID = document.getElementById('idTr1');
  var objTr = document.createElement('tr');

  var objTd = document.createElement('td');

  objTd .innerHTML = "<input name='userfile[]' type='file' size='56'>";

  objTr.insertAdjacentElement('beforeEnd',objTd);

  oID.insertAdjacentElement('beforeEnd',objTr);
}
</script>

<table>
  <form name="write_form" action="write_ok.php" method="post" enctype="multipart/form-data" onsubmit="return submit_check()">
  <tr id="idTr1">
    <td>
       <input type="file" size="56" maxlength="255" name="userfile[]">
       <input type="button" value="Add File" onClick="addElements()">
    </td>
  </tr>
  </form>
</table>

이것을 파이어폭스에서 적용되는 부분을 다음과 같이 하였는데
createElement("input") 로 추가한 부분은 업로드가 안되네요.

Code: Select all

<script language="javascript">
function addElements2() {
  var oID = document.getElementById('idT');

  var item = document.createElement("input");
  item.setAttribute('type','file');
  item.setAttribute('name','userfile[]');
  item.setAttribute('size','56');

  oID.appendChild(item);
}
</script>

<table>
  <form name="write_form" action="write_ok.php" method="post" enctype="multipart/form-data" onsubmit="return submit_check()">
  <tr>
    <td id="idT">
       <input type="file" size="56" maxlength="255" name="userfile[]">
       <input type="button" value="Add File" onClick="addElements2()">
    </td>
  </tr>
  </form>
</table>

input(File) 원소가 추가버튼을 클릭할 때마다 하나씩 추가가 되기는 하는데
처리페이지에서는 자바스크립트 document.createElement(input) 로 추가된 원소는
인식을 못하는지 본문 html 코드상에 있는 첫 번째 파일만 업로드 됩니다.


처리페이지에서는 다음과 같이 다중업로드 파일을 처리합니다.

Code: Select all

<?php
if (is_uploaded_file($_FILES['userfile']['tmp_name'][0])==true) {
  $file_num = count($_FILES['userfile']['tmp_name']);
	
  for ( $h=0 ; $h<$file_num ; $h++ ) {
    if (is_uploaded_file($_FILES['userfile']['tmp_name'][$h])==true) {
       //파일처리부분
    }
  }
}
?>

document.createElement("input") 를 사용하게 된 이유는 innerHTML 로
추가된 부분에 포함된 폼원소는 해당 폼원소를 둘러싸고 있는 폼객체의
하위원소로 인식이 되질 않아서 입니다.

읽어주셔서 감사합니다.

[eouia]

Code: Select all

item.name = 'userfile[]';

처럼 해보시길.

[eouia]

조금 다른 이야기인데,
name, id, class 등은 attribute가 아니라서 setAttribute로 제어하려하면 안되는 걸로 알고 있습니다.
또한, onclick, onfocus등의 이벤트 트리거도 attribute가 아니므로 setAttribute로 제어하면 안될겁니다.