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;  
}  
}  
}  


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值