zoukankan      html  css  js  c++  java
  • 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>

      效果如下:

  • 相关阅读:
    vue工作篇
    idea快捷键
    idea怎么随时随地调整字体大小
    idea配置maven
    idea启动加速
    idea配置tomcat
    idea设置哪个浏览器打开
    jsonArray和jsonObject的理解
    多文件上传保存到本地服务器
    并发编程
  • 原文地址:https://www.cnblogs.com/luxh/p/2546930.html
Copyright © 2011-2022 走看看