您当前的位置是:首页 - 新闻动态 - 网站设计 » JS实现批量上传功能

JS实现批量上传功能
http://www.Junww.com  2011-10-10  点击次数:次   来源:浚网科技  
分享到:

    用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">&nbsp;
    <input type="button" id="DelBtn" value="删除" disabled="disabled" onClick="DeleteMoreRow()">
    </td>
    </tr>
    </table>
    <table>
    <tr align="center">
    <td align="center">
    <input type="submit" value="保存">&nbsp;&nbsp;<input type="reset" value="取消"></td>
    </tr>
    </table>
    </form>
    </body>
    </html>



上一篇:右下角弹出类似QQ或MSN消息提示
下一篇:标记类语言:与HTML相比XHTML有什么特点