码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-04-07 09:30:40      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:

有时候需要在页面上允许用户上传多个文件,个数由用户自己决定,个数多了也可以删除,使用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>

  

效果如下:

技术分享

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

标签:

原文地址:http://www.cnblogs.com/shouce/p/5362056.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!