北在北方

太白枝头看,花开不计年,杯中浮日月,楼外是青天。

导航

jQuery动态添加<input type="file">

Posted on 2012-06-12 22:12  CN.programmer.Luxh  阅读(3472)  评论(8编辑  收藏  举报

  有时候需要在页面上允许用户上传多个文件,个数由用户自己决定,个数多了也可以删除,使用jQuery可以很简单的实现这个功能。

<!DOCTYPE html>
<html>
  <head>
    <title>test.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
        
        //添加一行<tr>
        function add() {
            var content = "<tr><td>";
            content += "<input type='file' name='file'><input type='button' value='Remove' onclick='remove(this)'>";
            content +="</td></tr>"
            $("#fileTable").append(content);
        }
        
        //删除当前行<tr>
        function remove(obj) {
            $(obj).parent().parent().remove();
        }
     </script>
  </head>
  <body>
   <form id="fileForm" action="" method="post" enctype="multipart/form-data">
        <table id="fileTable">
            <tr>
                <td>
                    <input type="file" name="file"><input type="button" id="addButon" value="Add" onclick="add()">
                </td>
            </tr>
        </table>
   </form>
  </body>
</html>

 

  效果如下: