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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery动态添加<input type="file">相关的知识,希望对你有一定的参考价值。

有时候需要在页面上允许用户上传多个文件,个数由用户自己决定,个数多了也可以删除,使用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">的主要内容,如果未能解决你的问题,请参考以下文章

jQuery-为动态添加的元素绑定事件

Jquery动态添加input和删除input

Jquery动态添加input和删除input

HTML+jQuery实现动态添加<input>输入框

jquery 动态添加,降低input表单的方法

利用jQuery动态添加input输入框,并且获取他的值