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

最新推荐文章于 2021-06-15 21:49:24 发布

转载最新推荐文章于 2021-06-15 21:49:24 发布 · 648 阅读

JQuery 同时被 2 个专栏收录

37 篇文章

订阅专栏

网站前端效果

22 篇文章

订阅专栏

本文介绍如何使用jQuery轻松实现网页上用户自定义文件上传功能，包括允许用户上传多个文件，每上传一个文件就自动增加一行输入框，并提供删除功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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