js批量上传界面的实现

更新时间：2008年04月07日 20:52:43 作者：

我谈谈一个非常简单的功能。用javascript来实现：通常的博客上都支持上传文件有2种方式：

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需再刷新一下页面才能执行]

select下拉选择框美化实现代码(js+css+图片)
图片+JavaScript+CSS三者共同打造超漂亮的select下拉选择框，更看重外观的朋友将会对本代码非常喜欢。
2010-03-03
js动态在form上插入enctype=multipart/form-data的问题
在做文件上传的时候碰到了一个比较奇怪的问题，IE6，7，8上传文件总是失败，服务端接收不到文件的问题
2012-05-05
一个非常强大完整的web表单验证程序Validator v1.05
一个非常强大完整的web表单验证程序Validator v1.05...
2006-07-07
onpropertypchange
onpropertypchange...
2006-07-07
比较实用的复选框的实用javascript脚本
比较实用的复选框的实用javascript脚本...
2007-09-09
javascript之文本框输入四个数字自动加空格的脚本
javascript之文本框输入四个数字自动加空格的脚本...
2007-11-11
JS 表单验证大全
JS 表单验证大全,整理的比较全了，需要的朋友可以查找下。
2011-11-11
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）
2008-09-09
js下获得单选框的值的代码
js下获得单选框的值的代码...
2007-09-09
javascript 清空form表单中某种元素的值
比如在一个表单元素中我们可以通过手写函数,清空某种元素的值,以上是我的个人总结,高手就绕过。
2009-12-12