다중 파일 업로드

[방법 1] - 파일을 추가하면 자동으로 파일box가 추가된다.
<script language="JavaScript">
    var uf = ''; 

    function sw_file_add(size, ext) { 
        eval('sw_file_add_form' + uf).innerHTML += "<input type=file name=file[] size='" + size + "' " + ext + " onchange=\"sw_file_add("+size+", '"+ext+"')\"><div id='sw_file_add_form" + (uf+1) + "'></div>"; 
         uf++; 
    }
</script>

 

<input type=file name=file[] size=50 class=input_write onchange="sw_file_add(50,'class=input_write');">
<div id=sw_file_add_form></div>

 

이 방법은 권장하지 않는다.

왜냐하면 파일box의 내용이 바뀌어도 박스가 추가되기 때문이다.

 

[방법 2] - 파일box를 버튼을 눌러서 추가한다.

<script language="JavaScript"> 
    function addFileField() { 
        upload_list = document.getElementById('uploads'); 
        alert(upload_list.innerHTML)

 

        list_item = document.createElement("LI"); 
        file_field = document.createElement("INPUT"); 
        file_field.type = "file"; 
        file_field.name = "file[]"; 
        file_field.change="addFileField();";

        // file_field.class = "input2"; 
        // file_field.style = "border:solid 1;"; 
        file_field.size = 30; 
        list_item.appendChild(file_field); 
        upload_list.appendChild(list_item); 
    }
</script>

 

<a href="#" onclick="addFileField()">add file</a>
<ol id="uploads">
<LI><input type=file name=file[] size=30 class=input2 onchange="addFileField()"> </LI>
</ol> 

 

권장할 만한 방법이지만 한번 추가된 박스는 1번의 방법과 같이 삭제가 불가능 하다.

 

[방법 3] - 미리 업로드할 파일의 갯수를 정한다.
<script language="javascript">
    // 원하는 개수만큼 첨부파일 추가
    function fi_add(ari_num) {
        var lo_row,   lo_cell;   
        var i = 0;        

 

        // 정상적으로 삭제되면
        if ( fi_del() == "delete_ok" ) {
            var lo_tbody = tbl_attach.childNodes(0); // table의 tbody를 읽어서
            for ( i=0; i< ari_num; i++ ) {
                // 새로운 tr을 만든다.
                lo_row = document.createElement("TR");         
                lo_tbody.appendChild(lo_row);

 

                // 파일첨부 td를 생성하고 file폼을 넣어준다.
                lo_cell = document.createElement("TD");
                lo_row.appendChild(lo_cell);
                lo_cell.innerHTML = "<input type=\"file\" name=\"img\" size=\"30\">";
            }
        }   
    }

 

    // table의 로우를 삭제하는 함수
    function fi_del() {
        var lo_table = document.getElementById("tbl_attach");

 

        for ( var i=parseInt(lo_table.rows.length)-1; i>=0; i-- ) {
            lo_table.deleteRow(i);
        }  

        return "delete_ok";
    }
</script>

 

// 제한할 파일 업로드 박스를 지정한다. 아래는 11개까지 업로드할 수 있게 한다.

<select name="sbx_num" onchange="fi_add(this.value);">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
   <option value="6">6</option>
   <option value="7">7</option>
   <option value="8">8</option>
   <option value="9">9</option>
   <option value="10">10</option>
   <option value="11">11</option>
</select>

<table id="tbl_attach" border="1">
   <tr>
      <td>
         <input type="file" name="img" size="30">
      </td>
   </tr>
</table>

[출처] 다중 파일 업로드 3가지 방법|작성자 항해자