js批量上傳界面的實現

2019-11-21 01:46:38

字體：大中小

來源：轉載

供稿：網友

1.下載插件快速上傳。
2.用HTML上傳控件有限制的上傳。

我下面用javascript腳本來實現2的功能。

1.動態的增加上傳控件。
2.動態的刪除上傳控件。
3.限制用戶在上傳控件中亂輸入路徑。

<html> <head> <meta http-equiv="content-type" content="text/html"> <title>locale photo</title> <script> function AddMoreRow() {     var oRow=event.srcElement.parentNode.parentNode;     var oTable=oRow.parentNode.parentNode;     oNewRow=oTable.insertRow();     for(i=0;i<oRow.cells.length;i++)     {         oNewRow.insertCell().innerHTML=oRow.cells[i].innerHTML;     }     oRow.all("DelBtn").disabled=false;     oNewRow.all("DelBtn").disabled=false; } function DeleteMoreRow() {     var oRow=event.srcElement.parentNode.parentNode;     var oTable=oRow.parentNode.parentNode;    if(oTable.rows.length>1)     {         oTable.deleteRow(oRow.rowIndex);         if(oTable.rows.length==1)         {            oTable.all("DelBtn").disabled=true;         }     } } function DisabledKeyInput() {     if(event.keyCode!=8&&event.keyCode!=46)     {         event.returnValue=false;     } } </script> </head> <body topmargin="10"> <form method="post" enctype="multipart/form-data"> <table><th>批量上傳</th></table> <table> <tr> <td nowrap="nowrap">名稱*</td> <td><input type="text" name="Name" size="15" maxlength="50"></td> <td nowrap="nowrap">文件路徑*</td> <td><input type="file" name="FilePath" size="15" onKeyDown="DisabledKeyInput()" /></td> <td nowrap="nowrap">說明*</td> <td><input type="text" name="Description" size="45"><input type="button" value="增加"  onclick="AddMoreRow()"></td> <td nowrap="nowrap">  <input type="button" id="DelBtn" value="刪除" disabled="disabled" onClick="DeleteMoreRow()"> </td> </tr> </table> <table> <tr align="center"> <td align="center"> <input type="submit" value="保存">  <input type="reset" value="取消"></td> </tr> </table> </form> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：javascript倒計時效果代碼，可以方便參數調用

下一篇：大家未必知道的Js技巧收藏