JS動態添加文件上傳組件 struts2

<table id="uploadTable" width="100%" border="0">  
       <tr>  
           <td>  
            <s:file size="100" name="uploadFiles" cssClass="edit_fileField"/> &nbsp;  
              <s:label value="目標路徑:"/><s:textfield name ="targetPaths[0]" label ="目標路徑" cssStyle="width:200px;"  cssClass="inputPathCls"/>  
            </td>  
       </tr>  
       <tr id="fileTr" style="display: none;">  
           <td>  
              <s:file size="100" name="uploadFiles" cssClass="edit_fileField"/> &nbsp;  
              <s:label value="目標路徑:"/><s:textfield name ="targetPaths[1]" label ="目標路徑" cssStyle="width:200px;" cssClass="inputPathCls"/>
              <input type="button" value="刪除" />  
           </td>  
       </tr>  
       <tr id="op">  
           <td>  
               <s:submit value="上傳" cssClass="edit_toolbutton"/>  
               &nbsp;  
               <input type="button" id="Add_link" value="添加" class="edit_toolbutton" οnclick="addFileComponent();" />  
               &nbsp;  
           </td>  
       </tr>  

   </table> 

---------------------------------------------分隔線---------------------------------------------

//文件組件計數
var pos = 1;  


//添加一個文件上傳組件
function addFileComponent() {  
var elTable = document.getElementById('uploadTable').getElementsByTagName('tbody')[0];  
var elTr = document.getElementById('fileTr');  
var elTr2 = document.getElementById('op');  
var newEleTr = elTr.cloneNode(true);  
newEleTr.id = "fileTr" + pos;         
newEleTr.style.display = "";  
inputs = newEleTr.getElementsByTagName('input');  
inputs[0].id="file" + pos;  

//爲目標路徑文本框指定具體的索引值
inputs[1].name = "targetPaths[" + pos + "]";

//爲刪除按鈕註冊事件
var elDel = inputs[2];  
elDel.οnclick=function(e){
delFileComponent(e);
};  
elDel.id="delbutton" + pos++;  
elTable.insertBefore(newEleTr, elTr2);  
}  


//刪除文件組件 
function delFileComponent(e) {  
var elTable = document.getElementById('uploadTable').getElementsByTagName('tbody')[0];  
var trArr = elTable.getElementsByTagName("tr");  

var theEvent = window.event || e;
        var srcElement = theEvent.srcElement;
        if (!srcElement) {
          srcElement = theEvent.target;
        }

for(var j = 0; j < trArr.length; j++) {  
tr = trArr[j];  
if(tr.getElementsByTagName("input")[2] == srcElement) {  
elTable.removeChild(tr);  
pos--;  
break;  
}  
}  
}  


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章